javascript - jQuery:当绑定(bind)/单击事件用于类时引用调用对象(this)

Question

感谢阅读本文。

我正在动态生成一些数据，其中包括一个选择下拉列表，旁边有一个文本框。如果用户单击选择，我将动态填充它(下面的代码)。我在 select 上有一个类，我希望下面的代码能工作。我在选择上用一个 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