web-dev-qa-db-ja.com

jquery ajax（）async false

問題があります。

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

問題は：そこに置いていないasync: falseのデータはfile.phpから最後のdivにのみあるのでid 9であるが、今はasync: falseがある-データがすべてのdivので、それは良いです

しかし、ajaxで読み込み中にクリックしたい場合は動作しません（すべてのajax-esを終了した後にのみ）

この問題をどのように解決しますか？ （おそらく、私はajaxを使用しているということです。getJSONectを使用できます。）

助けてくれてありがとう

jqueryajaxasynchronous
13
dontHaveName

Ajax呼び出しの実行中にユーザーがインターフェイスを使用できるようにするには、asyncをtrueに変更する必要があります。また、James Allardiceは、このシナリオでは、ajax呼び出しが返されるときに元のidの値を保持するためにjavascriptクロージャーを使用する必要があることにも注目しています。 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));
}
26
Josh Mein

これに対する良い解決策は、再帰関数を使用することです。

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