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

Thanks for reading 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

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

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 is so the select is updated only once, then the .bind allows any options selected to be placed in the adjacent text box.

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

5 个解决方案

#1

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

$(this)仅在函数范围内相关。但是在功能之外,它失去了参考:

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

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():

顺便问一下,你熟悉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

#2

I believe that this is because the function attached to the success event doesn't know what 'this' is as it is run independently of the object you're calling it within. (I'm not explaining it very well, but I think it's to do with closures.)

我相信这是因为附加到success事件的函数不知道'this'是什么,因为它独立于你在其中调用它的对象运行。 (我不是很好解释,但我认为这与封闭有关。)

I think if you added the following line before the $.ajax call:

我想如果你在$ .ajax调用之前添加了以下行:

var _this = this;

and then in the success function used that variable:

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

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

it may well work

它可能很好用

#3

That is matching one select. You need to match multiple elements so you want

那是匹配一个选择。你需要匹配多个元素

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

#4

The success() function does not know about this, as any other event callback (they are run outside the object scope).

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

You need to close the variable in the scope of the success function, but what you really need is not "this", but $(this)

你需要关闭成功函数范围内的变量,但你真正需要的不是“this”,而是$(this)

So:

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

#5

Thanks Owen. Although there may be a better to write the code (with chaining)....my problem with this code was $(this) was not available in the .ajax and .bind calls..so storing it in a var and using that var was the solution.

谢谢欧文。虽然编写代码可能会更好(带链接)....我的代码问题是$(this)在.ajax和.bind调用中没有。所以将它存储在var中并使用它var是解决方案。

Thanks again.

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