[解決済み] AJAXサクセスの中の$(this)が機能しない

質問

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

            }   
        }
    });

});

どのように解決するのですか？

問題点

コールバックの内部で this を参照しています。 jqXHR オブジェクトを指し、イベントハンドラがバインドされていた要素ではありません。 の詳細については this が JavaScript でどのように動作するかについては .

ソリューション

ES2015+ が利用可能な場合、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` にアクセスするには？