2012-06-28 22 views
14

私は..jqueryのAJAX()非同期偽

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呼び出しが実行されている間のインタフェースを使用することができるようにしたい場合は、

+4

これは小さなものであり、私の好みと見ることができますが、良い変数名が出てくるのはいつも価値があります。あなたを追いかけなければならない人には、イライラすることがあります。私は私の答えでより良い変数名を作るだろうが、私はあなたのシナリオを知らない。 –

答えて

26

を支援するための

おかげでasynctrueに変更する必要があります。このシナリオでは、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)); 
} 
+1

ええ、私がこれを行った場合、for()がより速くなるため、最後に作成されたすべてのdivにデータがありません。 – dontHaveName

+2

'aの値を取得するにはクロージャーで' ajax'呼び出しをラップする必要があります'を繰り返します。 –

+0

あなたは$( "div")と思います。each(function(){ajax}); ?もし成功すれば試してみましたが、それでもうまくいきませんでした。( – dontHaveName

1

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

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); 
関連する問題