Ajaxコールでリンクhtmlとクラスが更新されない

Question

ダッシュボードには複数のパネルと情報&があります。だから、コード全体をAjax呼び出しを使って作業するために、より非同期にするために書き直しています。 .is-ajaxクラスのボタンがいくつかあります。だから私はそれをクリックすると、JQueryは、希望のエンドポイントの要求を送信します。

これはHTML

<a class="button is-danger is-outlined is-fullwidth update-all is-ajax" data-endpoint="update/all" data-params=""> 
        <span class="icon"><i class="fa fa-arrow-up"></i></span> <span>Actualizar todo</span> 
       </a> 

これはJS

$('.is-ajax').click(function() { 
    $(this).addClass("is-loading"); 
    $.get("ajax/" + $(this).data("endpoint") + "?params=" + $(this).data("params"), function (data) { 
     $(this).removeClass("is-loading"); 
     $(this).html(data); 
    }); 
}); 

はなぜ応答が変更されませんされているが、ボタンのですか？

Answer 1

まず、サーバーが期待するhtmlを返すことを確認します。成功のコールバックでは、console.log(data)を試してみてください。

thisの代わりに、参照できる変数に変更する要素を割り当てます。

$('.is-ajax').click(function() { 
    var elem = $(this); 
    elem.addClass("is-loading"); 
    $.get("ajax/" + $(this).data("endpoint") + "?params=" + elem.data("params"), function (data) { 
     elem.removeClass("is-loading"); 
     elem.html(data); 
    }); 
}); 

Answer 2

もちろん！ごめんなさい。 これは解決策ですか？

$('.is-ajax').click(function() { 
    var btn = $(this); 
    btn.toggleClass("is-loading"); 
    $.get("ajax/" + $(this).data("endpoint") + "?params=" + $(this).data("params"), function (data) { 
     btn.toggleClass("is-loading"); 
     btn.html(data); 
    }); 
});