jqueryのAJAX（）非同期偽

Question

私は..

for(a=1;a<10;a++){ 
    $(".div").append("<div id="+a+"></div>") 
     $.ajax({ 
       url: "file.php", 
       data: "a="+a, 
       type: "POST", 
       async: false, 
       success: function(data) { 
       $("#"+a).html(data); 
       } 
     }); 

} 
$("div").click(function(){ 
     alert("it works"); 
}); 

問題が問題ですしている： は、私はので、最後のdivであるfile.phpそこからasync: falseデータ入れていないで、ID 9 と今async: falseあり - データがでているので、すべてはそれが良い

あるので、DIVが、私はそれは、AJAXでロードしている間にクリックしたい場合は、それは動作しません（後にのみ終了し、すべてのAJAX-ES）

どのようにこの問題を解決しますか？ （多分偽のは、私は、AJAXを使用していますということです。私がgetJSON電気ショック療法..使用することができます）あなたは、ユーザーがAJAX呼び出しが実行されている間のインタフェースを使用することができるようにしたい場合は、

Answer 1

を支援するための

おかげでasyncをtrueに変更する必要があります。このシナリオでは、ajax呼び出しが返されたときの元のidの値を保持するためにjavascriptクロージャを使用する必要があることもJames Allardiceによって指摘されています。 javascriptのクロージャに関する詳細については、how-do-javascript-closures-workをご覧ください。本当に良い質問は、ここでstackoverflowにあります。

for(id = 1; id < 10; id++){ 
    $(".div").append("<div id='" + id + "'></div>"); 

    (function(id) { 
     $.ajax({ 
      url: "file.php", 
      data: "a=" + id, 
      type: "POST", 
      async: true, 
      success: function(data) { 
       $("#"+ id).html(data); 
      } 
     }); 
    }(id)); 
} 

Answer 2

再帰関数を使用するのが良い解決策です。

function appendDivs(limit, count) { 
    count = count || 1; 
    if (count <= limit) { 
     $(".div").append("<div id=" + count + "></div>"); 
     $.ajax({ 
      url: "file.php", 
      data: "a=" + count, 
      type: "POST", 
      async: true, 
      success: function(data) { 
       $("#" + count).html(data); 
       appendDivs(limit, count + 1); 
      }, 
      error: function(e) { 
       alert('Error - ' + e.statusText); 
       appendDivs(limit, count + 1); 
      } 
     }); 
    } else { 
     return false; 
    } 
} 
appendDivs(10);