JQuery "ajax"メソッドのクロージャで作業する

Question

私は比較的新しいjavascriptですが、バグの原因を知っていますが、これをリファクタリングして動作させる方法がわかりません。

for (...) { 
    var variableQueryValue = i 

    addLink.bind('click', function() { 
     $.ajax({ 
      type: 'POST', 
      url: '/example', 
      data: 'queryvalue=' + variableQueryValue, 
      success: function(data) { 
       console.log('Got into success method!'); 
      } 
     }); 
    }); 
} 

だから基本的に私たちは、データの属性ごとに反復を変更するいくつかのvariableQueryValueに依存しているいくつかの要素にクリックイベントをバインドしています。バインド関数ハンドラが終了するため、ajaxリクエストでは、各繰り返しに対して同じ値のvariableQueryValueを使用するイベントハンドラをバインドします。

更新されたvariableQueryValueが考慮されるようにこれをどのようにリファクタリングすることができますか？

ありがとうございました！

Answer 1

function create_handler(j) { 
    return function(e) { 
     $.ajax({ 
      type: 'POST', 
      url: '/example', 
      data: 'queryvalue=' + j, 
      success: function(data) { 
       console.log('Got into success method!'); 
      } 
     }); 
    }; 
} 

for (...) { 
    addLink.bind('click', create_handler(i)); 
} 

ハンドラを作成する関数を呼び出し、iをその関数に渡します。次に、その関数をに返すと、.bind('click',...に割り当てられるハンドラがになります。

これは、関数を呼び出すときに、新しい変数環境を作成するためです。したがって、iの値を関数に渡し、同じ関数内でハンドラを作成すると、ハンドラはその特定の変数環境に渡された値を参照しています。

ハンドラは、（ハンドラを返していても）の元の変数環境を保持するため、常に適切なi値を参照します。

---

ハンドラで使用される永続的な値を保持するという問題に対しては、他の解決方法もありますが、これによって特定のクロージャの問題が解決されます。実際の状況によっては、これはあなたがしたいことかもしれません。

Answer 2

この目的で.live（）を使用できますか？

APIは言う：

説明：現在および将来の、現在のセレクタに一致するすべての要素のイベントにハンドラを接続します。

これは、セレクタがイベントを追加するときに存在しないという事実に応えてくれると思います...または私は誤解しましたか？

Answer 3

基本的に、リンクを個別にバインドする理由はありません。グループを選択し、イベントハンドラをグループにバインドします。

addLinkに必要な値を、forループの.data()を呼び出して追加します。次に、クリックイベントハンドラの値を取得します。

Answer 4

あなたはクロージャを作成するには、各コールバックラップすることができます：それはから変更することはできませんので

addLink.bind((function(variableQueryValue) { 
    return function() { 

     // variableQueryValue can be used here 
     $.ajax... 
    }; 
}(variableQueryValue))); 

この道を、あなたは、ローカル変数が保存されている新機能のウィッヒを返し、すぐにコールバックを実行します外側。

Answer 5

forループの各繰り返しの間に、値がiの場合、変数を閉じる必要があります。

for (...) { 
    (function(variableQueryValue){ 
     addLink.bind('click', function() { 
      $.ajax({ 
       type: 'POST', 
       url: '/example', 
       data: 'queryvalue=' + variableQueryValue, 
       success: function(data) { 
        console.log('Got into success method!'); 
       } 
      }); 
     }); 
    })(i); 
}