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

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.

我正在尝试修改一些旧代码，它使用onclick，以便我使用$(this)。问题是，在成功的过程中，$(this)不工作。是否有方法在不将其设置为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");

            }   
        }
    });

});

2 个解决方案

#1

Problem

Inside the callback, this refers to the jqXHR object of the Ajax call, not the element the event handler was bound to. Learn more about how this works in JavaScript.

在回调内部，它引用Ajax调用的jqXHR对象，而不是事件处理程序绑定到的元素。了解更多关于如何在JavaScript中工作的信息。

---

Solutions

If ES2015+ is available to you, then using an arrow function would probably be the simplest option:

如果可以使用ES2015+，那么使用箭头函数可能是最简单的选择:

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

You can set the context option:

您可以设置上下文选项:

This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). (...)

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

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

or use $.proxy:

或者使用$ .proxy:

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

or keep a reference to the value of this outside the callback:

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

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
    }
});

---

Related

• How to access the correct `this` inside a callback?
• 如何在回调中访问正确的“this”?

#2

jQuery(".custom-filter-options .sbHolder ul li a").each(function () {
    var myStr = jQuery(this).text();
    var myArr = myStr.split(" (");
     url = 'your url'; // New Code
            data = myArr[0];
                try {
                    jQuery.ajax({
                        url : url,
                        context: this,
                        type : 'post',
                        data : data,
                        success : function(data) {
            if(data){
                  jQuery(this).html(data);
            }else{
                  jQuery(this).html(myArr[0]);
            }
                        }
                    });
                } catch (e) {
                } 


});