jQuery：当绑定/单击事件用于类时引用调用对象（this）

Question

感谢您阅读本文。

我正在动态生成一些数据，其中包括一个选择下拉菜单，旁边有一个文本框。如果用户单击选择，我将动态填充它（下面的代码）。我有一个关于选择的课程，我希望下面的代码可以工作。我用选择上的 ID 对其进行了测试，并将 ONE 放在我让它工作的 ID 上。但是，在更改代码以引用一个类（因为将有多个数据组，其中包括一个带有旁边一个文本框的选择）和$(this)，我无法让它工作。任何想法都会有所帮助。谢谢

select旁边的文本框的相关性是代码的第二部分...在select中选择一个选项时更新文本框

.one 是这样选择只更新一次，然后.bind 允许将任何选择的选项放置在相邻的文本框中。

$('.classSelect').one("click",
 function() {
  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(this).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(this).bind("click",
   function() {
    $(this).next().val($(this).val());
  }); // End BIND
 }); // End One

 <select id="mySelect" class="classSelect"></select>
 <input type="text">

Answer 1

$(this) 仅在函数范围内相关。但是，在函数之外，它会丢失该引用：

$('.classSelect').one("click", function() {
   $(this); // refers to $('.classSelect')

   $.ajax({
   // content
      $(this); // does not refer to $('.classSelect')
   });
});

处理此问题的更好方法可能是：

$('.classSelect').one("click", function() {
    var e = $(this);

    $.ajax({
    ...
        success : function(request) {
          e.html(request);
        }
    }); // end ajax

    $(this).bind('click', function() {
    // bind stuff

    }); // end bind

}); // end one

顺便问一下，你熟悉load() 方法吗？我发现基本 ajax 更容易（因为它作用于包装集，而不是像 $.ajax() 这样的独立函数。这是我将如何使用 load() 重写它：

$('.classSelect').one('click', function() {
    var options = {
       type : 'post',
       dataType : 'text',
       data : {
         '_service' : myService,
         '_program' : myProgram ,
         'param' : myParams
       }           
    } // end options

    // load() will automatically load your .classSelect with the results
    $(this).load(myUrl, options);


    $(this).click(function() {
    // etc...

    }); // end click

}); // end one

Answer 2

我相信这是因为附加到成功事件的函数不知道“this”是什么，因为它独立于您在其中调用它的对象运行。 （我解释得不是很好，但我认为这与闭包有关。）

我想如果您在 $.ajax 调用之前添加以下行：

var _this = this;

然后在成功函数中使用该变量：

   success:
    function(request) {
     _this.html(request);   // populate select box
   }

它可能很好用

Answer 3

即匹配一个选择。你需要匹配多个元素，所以你想要

$("select[class='classSelect']") ...

Answer 4

success() 函数不知道这一点，因为任何其他事件回调（它们在对象范围之外运行）。

你需要关闭成功函数作用域内的变量，但你真正需要的不是“this”，而是$(this)

所以：

var that = $(this);
... some code ...
success: function(request) {
  that.html(request)
}

Answer 5

谢谢欧文。尽管编写代码可能更好（使用链接）....我对这段代码的问题是 $(this) 在 .ajax 和 .bind 调用中不可用..所以将它存储在一个 var 中并使用它var 是解决方案。

再次感谢。

$('.classSelect').one("click",
 function() {
  var e = $(this) ;

  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(e).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(e).one("click",
   function() {
    $(e).next().val($(e).val());
  }); // End BIND
 }); // End One