Question

可能重复：
$(this) inside of AJAX success not working

我正在使用一键式按钮，其中有一个ajax回调。如果它返回成功，我想在我的按钮中添加一个类，如$(this).addClass('abc');，但没有用。 $(this)无法在AJAX中运行。执行此操作的替代方法是什么，因为有几个相同的块。

Answer 1

进入AJAX回调后this不再指向您的按钮（谷歌“JavaScript关闭，此更多”）。

您需要将对当前this的引用保存到变量中，然后使用它来添加类。像这样：

$( '#button' ).click ( function () {
  var $this = $( this );
  $.get (
    'url',
    function ( data ) {
      $this.addClass ( 'abc' );
    }
  );
} );

Answer 2

你是对的。这在ajax调用中是不可访问的，因为它是对ajax对象的引用。但是，您可以将其另存为另一个变量，并在回调中使用它。

工作演示： http://jsfiddle.net/gZ8qB/

$("#mybutton").click(function () {
    var $this = $(this);
    $.ajax({
        url: "http://fiddle.jshell.net/favicon.png",
        beforeSend: function ( xhr ) {
            xhr.overrideMimeType("text/plain; charset=x-user-defined");
        }
    }).done(function ( data ) {
        $this.addClass("done");
    });
});

Answer 3

将$(this)保存到变量..然后使用

试试这个

var $this=$(this);

进行ajax调用..并使用

 $this.addClass("done");

Answer 4

在AJAX调用的回调函数中未定义$(this)对象。如果需要引用触发调用的原始元素，可以将其分配给事件处理函数中的变量，使其在回调函数的范围内也可用。

例如（使用$.get简写）：

$('#some-button').on('click', function() {
    var some_button = $(this); // Assign the variable in the event handler
    $.get('some_url',{some_ariable:'some_value'}, function(data) {
         some_button.addClass('some_class'); // some_button is now also in the scope of the AJAX callback function
    });
});

此概念称为closures，其中"functions have access to variables that were available in the scope where the function was created"。有关此主题的更多信息，请参阅jQuery's - Javascript 101。

$（this）对象在AJAX回调中不可用

4 个答案: