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

Question

感谢您阅读本文.

我正在动态生成一些数据,其中包括一个带有文本框的选择下拉列表.如果用户单击选择,我将动态填充它(下面的代码).我有一个选择的类,我希望以下代码可以工作.我在选择中使用ID对其进行了测试,并将ONE放在我得到它的ID上.但是,在更改代码以引用类时(因为将有多个数据组包含一个带有旁边的文本框的选项)$(this),我无法使其工作.任何想法都会有所帮助.谢谢

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

.one因此,select只更新一次,然后.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