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

感谢您阅读本文。

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

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

.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">

$(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() http://docs.jquery.com/Ajax/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