$（this）AJAX成功の内側が機能しない

$（this）を使用できるように、onclickを使用する古いコードを変更しようとしています。問題は、成功の内側では$（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");

            }   
        }
    });

});

問題

コールバック内では、イベントハンドラーがバインドされた要素ではなく、Ajax呼び出しのオブジェクトをthis参照しjqXHRます。JavaScriptでの動作の詳細をご覧くださいthis。

ソリューション

ES2015 +が利用できる場合は、矢印関数を使用するのがおそらく最も簡単なオプションです。

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

次のcontextオプションを設定できます。

このオブジェクトは、すべての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
    }
});

関連した

• コールバック内で正しい「this」にアクセスする方法は？

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


});