jQueryカスタム関数が間違っている "this" reference

Question

jQueryで同じコードを複数回実行する必要があるため、自分のjQuery関数を作成することにしました。 （この$ "成功の機能で、ここでそれを使用しながら、「これは」間違ったインスタンスを参照するように思われること、

   jQuery.fn.extend({ 
       fooFunction: function() { 
        $.ajax({ 
         type: "POST", 
         cache: false, 
         url: "includes/thescript.php", 
         success: function (data) 
         { 
          $(this).html(data); 
         }, complete: function() { 
          // do sth 
         } 
        }); 
        return $(this); 
       } 
      }); 

をしかし、今、私は問題を抱えている：

それはこれまでのところ、このようになります。 ）.html（data）; "となります。

私は代わりにというIDを使用します。 $（ "＃TheID"）.html（data）;それはうまくいくが、なぜ「これ」ではないのだろうか？私は関数を呼び出す：。間

jQueryのAjaxのコールバックで $（ "＃のTheID"）fooFunction（）

Answer 1

問題は、あなたがsuccessパラメータに提供匿名関数の中にいるときthisの範囲が変化することです。問題を解決するには、このように、変数に外側のスコープからthis参照を格納することができますの

jQuery.fn.extend({ 
    fooFunction: function() { 
     var $el = $(this); 
     $.ajax({ 
      type: "POST", 
      cache: false, 
      url: "includes/thescript.php", 
      success: function (data) { 
       $el.html(data); 
      }, 
      complete: function() { 
       // do something 
      } 
     }); 
     return $el; 
    } 
}); 

Answer 2

、 "このは" で使用されるオプションへの参照でありますajaxリクエスト。これはDOM要素への参照ではありません。詳細については

は、関数キャッシュ$(this)の開始時に、このリンク$(this) inside of AJAX success not working

Answer 3

を訪問して、代わりにそれを使用します。

thisは、関数コンテキストの関数参照で、対象となる要素ではありません。

これを試してください。

jQuery.fn.extend({ 
    fooFunction: function() { 
     var $this = $(this); 
     $.ajax({ 
      type: "POST", 
      cache: false, 
      url: "includes/thescript.php", 
      success: function (data) 
      { 
       $this.html(data); 
      }, complete: function() { 
       // do sth 
      } 
     }); 
     return $this; 
    } 
});