jQuery：当绑定/单击事件用于类时，引用调用对象（this） [英] jQuery: Referencing the calling object(this) when the bind/click event is for a class

问题描述

感谢您阅读本文。

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

I am dynamically generating some data which includes a select drop-down with a text box next to it. If the user clicks the select, I am dynamically populating it (code below). I have a class on the select and I was hoping the following code would work. I tested it with an ID on the select and putting the ONE on the ID I got it to work. However, in changing the code to reference a class (since there will be multiple data groups that include a select with a text box next to it) and $(this), I could not get it to work. Any ideas would be helpful. Thanks

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

The relevance of the text box next to the select is the second part of the code...to update the text box when an option is selected in the select

.one 所以select只更新一次，然后 .bind 允许选择的任何选项放在相邻的文本框中。

.one is so the select is updated only once, then the .bind allows any options selected to be placed in the adjacent text box.

$('.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）仅在函数范围内相关。但是在函数之外，它会丢失该引用：

$(this) is only relevant within the scope of the function. outside of the function though, it loses that reference:

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

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

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

a better way to handle this may be:

$('.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（）：

by the way, are you familiar with the load() method? i find it easier for basic ajax (as it acts on the wrapped set, instead of it being a standalone function like $.ajax(). here's how i would rewrite this using 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

这篇关于jQuery：当绑定/单击事件用于类时，引用调用对象（this）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！