jquery ajax() asynchroniczny fałszywe

Question

Mam problem ..

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"); 
}); 

problemem jest: to nie umieścić tam async: false danych z file.php są tylko w ostatnim div id tak z 9 ale teraz jest async: false - więc dane są w każdy dział tak, że jest dobry

ale jeśli chcę kliknij póki to ładowanie przez AJAX to nie działa (tylko po zakończeniu wszystkich ajax-es)

jak rozwiązać ten problem? (Może być fałszywy, że używam ajax. Mogę używać getJSON ect ..)

dzięki za pomoc

Answer 1

Jeśli chcesz, aby użytkownik, aby móc korzystać z interfejsu, natomiast wywołanie ajax jest uruchomiony, powinien zmienić twój async na true. Również James Allardice zauważył, że w tym scenariuszu trzeba użyć zamknięcia javascript, aby zachować wartość oryginalnego id, gdy wywoływane jest wywołanie ajax. Aby uzyskać więcej informacji na temat zamknięć javascript sprawdź how-do-javascript-closures-work, naprawdę dobre pytanie znaleźć tutaj na 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

Dobrym rozwiązaniem jest użycie funkcji rekursywnej.

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);