Jquery AJAX 成功中的 $(this) 不起作用

发布于06月18日

I am trying to change some old code which uses onclick so that I an use the $(this). The problem is that $(this) is not working when inside the success. Is there anyway to do this without setting it as a var.

$('.addToCart').click(function() {

    $.ajax({
        url: 'cart/update',
        type: 'post',
        data: 'product_id=' + $(this).attr("data-id"),
        dataType: 'json',
        success: function(json) {

            if (json['success']) {

            $(this).addClass("test");

            }   
        }
    });

});

推荐答案

问题

在回调内部，this引用Ajax调用的jqXHR对象，而不是事件处理程序绑定到的元素.Learn more about how this works in JavaScript美元.

解决

如果您可以使用ES2015+，那么使用arrow function可能是最简单的 Select :

$.ajax({
    //...
    success: (json) => {
         // `this` refers to whatever `this` refers to outside the function
    }
});

您可以设置context option:

该对象将成为所有Ajax相关回调的上下文.默认情况下，上下文是一个表示调用中使用的ajax设置的对象($.ajaxSettings与传递给$.ajax的设置合并).(...)

$.ajax({
    //...
    context: this,
    success: function(json) {
         // `this` refers to the value of `context`
    }
});

或者使用$.proxy:

$.ajax({
    //...
    success: $.proxy(function(json) {
         // `this` refers to the second argument of `$.proxy`
    }, this)
});

或者在回调之外保留对值this的引用:

var element = this;

$.ajax({
    //...
    success: function(json) {
         // `this` refers to the jQXHR object
         // use `element` to refer to the DOM element
         // or `$(element)` to refer to the jQuery object
    }
});