ajax - $(this) オブジェクトは AJAX コールバックで使用できません

Question

重複の可能性:
$(this) 内部の AJAX 成功が機能しない

ajaxコールバックがあるワンボタンクリックを使用しています。成功が返された場合、ボタンにクラスを追加したいのですが、役に立た$(this).addClass('abc');ないのです。 $(this)AJAX で動作していません。同じブロックがいくつかあるため、これを行う別の方法は何ですか。

Answer 1

AJAXコールバックの中に入るとthis、ボタンを指しなくなります（詳細については、Googleの「JavaScriptクロージャーとこれ」を参照してください）。

current への参照を変数に保存し、thisそれを使用してクラスを追加する必要があります。このようなもの：

$( '#button' ).click ( function () {
  var $this = $( this );
  $.get (
    'url',
    function ( data ) {
      $this.addClass ( 'abc' );
    }
  );
} );

Answer 2

あなたは正しいです。これは ajax オブジェクトへの参照であるため、ajax 呼び出し内ではアクセスできません。ただし、それを別の変数として保存し、コールバック内で使用できます。

実際のデモ: http://jsfiddle.net/gZ8qB/

$("#mybutton").click(function () {
    var $this = $(this);
    $.ajax({
        url: "http://fiddle.jshell.net/favicon.png",
        beforeSend: function ( xhr ) {
            xhr.overrideMimeType("text/plain; charset=x-user-defined");
        }
    }).done(function ( data ) {
        $this.addClass("done");
    });
});

Answer 3

$(this)変数に保存し、それを使用します

これを試して

var $this=$(this);

ajax呼び出しを行います..そして使用します

 $this.addClass("done");

Answer 4

$(this)オブジェクトが AJAX 呼び出しのコールバック関数で定義されていません。呼び出しをトリガーした元の要素を参照する必要がある場合は、それをイベント ハンドラー関数の変数に割り当てて、コールバック関数のスコープ内でも使用できるようにすることができます。

例 ($.get短縮形を使用):

$('#some-button').on('click', function() {
    var some_button = $(this); // Assign the variable in the event handler
    $.get('some_url',{some_ariable:'some_value'}, function(data) {
         some_button.addClass('some_class'); // some_button is now also in the scope of the AJAX callback function
    });
});

この概念は と呼ばれclosuresます"functions have access to variables that were available in the scope where the function was created"。このテーマの詳細については、 jQuery's - Javascript 101を参照してください。