jquery ajax() async sai

Question

tôi đã có vấn đề ..

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

vấn đề là: là tôi không đặt ở đó async: false dữ liệu từ file.php chỉ trong div cuối cùng như vậy với id 9 nhưng bây giờ có async: false - vì vậy dữ liệu trong mỗi div để là tốt

nhưng nếu tôi muốn nhấn trong khi nó đã được tải bởi ajax nó không hoạt động (chỉ sau khi hoàn thành tất cả ajax-es)

cách giải quyết vấn đề này? (Có thể là sai lầm là tôi sử dụng ajax. Tôi có thể sử dụng getJSON vv ..)

nhờ giúp

Answer 1

Nếu bạn muốn người dùng để có thể sử dụng giao diện trong khi cuộc gọi ajax đang chạy, bạn nên thay đổi async thành true của bạn. Nó cũng đã được ghi nhận bởi James Allardice rằng trong kịch bản này, bạn cần phải sử dụng một đóng cửa javascript để giữ lại giá trị của id ban đầu của bạn cho khi cuộc gọi ajax được trả lại. Để biết thêm thông tin về việc đóng cửa javascript, hãy kiểm tra how-do-javascript-closures-work, một câu hỏi thực sự hay được tìm thấy ở đây trên 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

Một giải pháp tốt cho việc này là sử dụng chức năng đệ quy.

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