$ (this) bên trong AJAX thành công không hoạt động

Tôi đang cố gắng thay đổi một số mã cũ sử dụng onclick để tôi sử dụng $ (this). Vấn đề là $ (this) không hoạt động khi bên trong thành công. Có cách nào để làm điều này mà không đặt nó làm var không.

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

            }   
        }
    });

});

Vấn đề

Bên trong lệnh gọi lại, thisđề cập đến jqXHRđối tượng của lệnh gọi Ajax, không phải phần tử mà trình xử lý sự kiện bị ràng buộc. Tìm hiểu thêm về cách thishoạt động trong JavaScript .

Các giải pháp

Nếu ES2015 + có sẵn cho bạn, thì sử dụng hàm mũi tên có thể là tùy chọn đơn giản nhất:

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

Bạn có thể đặt contexttùy chọn :

Đối tượng này sẽ được làm bối cảnh của tất cả các lệnh gọi lại liên quan đến Ajax. Theo mặc định, ngữ cảnh là một đối tượng đại diện cho cài đặt ajax được sử dụng trong cuộc gọi (được $.ajaxSettingshợp nhất với cài đặt được chuyển đến $.ajax). (...)

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

hoặc sử dụng $.proxy:

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

hoặc giữ một tham chiếu đến giá trị của thisbên ngoài lệnh gọi lại:

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

Có liên quan

• Làm cách nào để truy cập đúng `this` bên trong một lệnh gọi lại?

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


});