Javascript jQuery多个AJAX同步请求&；动态添加html和事件

我有以下javascript

// JavaScript Document
$("[name=students]").each(function(){

        var student_id  = $(this).attr("data-student_id");

        ///////////////////////////////////////////////////////////////////
        ajax_call = $.ajax({
            method: "POST",
            url: "/load.php",
            dataType: "html",
            async: true,
            beforeSend: function(){
            },
            data:   { 
                        student_id: student_id
                    },

            success: function( response ) 
            {   
                // dynamically add radio buttons
                // html response is radio buttons with NAME of as_xxxx inside of parent div[name=students] element already in the DOM
                $("[name=students][data-student_id='"+student_id+"']").fadeIn( "slow").html(response).show();

            },
            error: function(xhr, textStatus, errorThrown)
            {
                // show error message
            },
        });
        //END AJAX/////////////////////////////////////////////////////////////////
    }).promise().done( function(){ 

        save_data();
    });
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//  SAVE
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function save_data()
{

    //$(document).on('click','[name=student][name^=as_]',function(event) // WORKS IF ajax ASYNC = TRUE

    $("[name=student][name^=as_]").on("click",function(event)  // DOES NOT WORK IF ajax ASYNC = TRUE.   Works if ASYNC = FALSE
    {
        // SAVE RADIO BUTTON DATA ON CLICK
    });
}
</javascript>

//JavaScript文档
$（“[name=students]”。每个（函数（）{
var student_id=$（this.attr（“data-student_id”）；
///////////////////////////////////////////////////////////////////
ajax\u call=$.ajax({
方法：“张贴”，
url:“/load.php”，
数据类型：“html”，
async:true，
beforeSend:function（）{
},
数据：{
学生号：学生号
},
成功：功能（响应）
{   
//动态添加单选按钮
//html响应是DOM中已存在的父div[NAME=students]元素内的名为as_xxxx的单选按钮
$（“[name=students][data-student_id=”“+student_id+”））.fadeIn（“slow”）.html（response.show（）；
},
错误：函数（xhr、textStatus、errorshown）
{
//显示错误消息
},
});
//结束AJAX/////////////////////////////////////////////////////////////////
}).promise（）.done（函数（）{
保存_数据（）；
});
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//拯救
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
函数save_data（）
{
//$（文档）。在（'click'，'[name=student][name^=as_u3;]'上，如果ajax ASYNC=TRUE，函数（事件）//将起作用
$（“[name=student][name^=as_quot]）。在（“单击”上，函数（事件）//在ajax ASYNC=TRUE时不起作用。在ASYNC=FALSE时起作用
{
//单击保存单选按钮数据
});
}

如果async为FALSE，代码可以正常工作。但是如果asnyc为TRUE，则无法单击任何动态添加的单选按钮

我假设promise（）.done代码在所有ajax同步请求完成之前启动

---

是否有一种方法来保证同步Ajax请求的完成？或者为什么代码不起作用？< /P> < P>这样，当然，多个Ajax请求当然是异步的，因为我们正在处理<代码> http>/COD>请求，您应该考虑<代码>承诺。e> api。 这个例子向您展示了如何进行几个异步http调用并收集结果，因此您可以

promiseAll(items, callback)
  .then((results) => {
    console.log(results)
  })
  .catch((error) => {
    console.log(error)
  });

您将在

中获得http调用的所有结果，而
回调
将实际执行异步作业（实际上可能是每种异步进程）


//简单的XMLHttpRequest
//基于https://davidwalsh.name/xmlhttprequest
SimpleRequest={
调用：函数（什么，响应）{
var请求；
如果（window.XMLHttpRequest）{//Mozilla，Safari。。。
请求=新的XMLHttpRequest（）；
}如果（window.ActiveXObject）{//IE
试一试{
请求=新的ActiveXObject（'Msxml2.XMLHTTP'）；
}捕获（e）{
试一试{
请求=新的ActiveXObject（'Microsoft.XMLHTTP'）；
}捕获（e）{}
}
}
//状态变化
request.onreadystatechange=函数（）{
如果（request.readyState==4）{//done
如果（request.status==200）{//完成
响应（request.responseText）
}else响应（）；
}
}
请求。打开（'GET'，what，true）；
请求发送（空）；
}
}
//允诺者
//@作者loretoparisi在gmail.com
var promiseAll=功能（项目、块）{
var承诺=[]；
items.forEach（函数（项、索引）{
承诺.推送（功能（项目一）{
返回新承诺（功能（解决、拒绝）{
返回块。应用（此[项、索引、解析、拒绝]）；
});
}（项目、索引））
});
返回承诺。全部（承诺）；
}//允诺者
promiseAll（[…新数组（3）]，（项目、索引、解决、拒绝）=>{
log（“发出请求[“+索引+”]））
SimpleRequest.call（'https://icanhazip.com/，函数（结果）{
如果（结果）{
console.log（“响应[”+索引+“]”+结果）；
决心（结果）；
}否则{
拒绝（新错误（“呼叫错误”））；
}
})
})
。然后（（结果）=>{
console.log（结果）
})
.catch（（错误）=>{
console.log（错误）
})
此方法有效…解决方案来自
更新代码：

    // JavaScript Document
    $("[name=areas]").each(function(){

            var student_id  = $(this).attr("data-student_id");
            var deferreds = [];
            ///////////////////////////////////////////////////////////////////
            deferreds.push( $.ajax({
                method: "POST",
                url: "/load.php",
                dataType: "html",
                async: true,
                beforeSend: function(){
                },
                data:   { 
                            //some data
                        },

                success: function( response ) 
                {   
                    // dynamically add radio buttons
                    // html response is radio buttons with NAME of as_xxxx inside of #container (parent element)
                    $("[name=areas][data-student_id='"+student_id+"']").fadeIn( "slow").html(response).show();

                },
                error: function(xhr, textStatus, errorThrown)
                {
                    // show error message
                }
            }) //END AJAX/////////////////////////////////////////////////////////////////
            );

        }); // .each


         $.when.apply(null, deferreds).done(function() {
              console.log("*************** DONE *****************");
             save_data();
            });    
    });
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //  SAVE
    //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function save_data()
    {

        //$(document).on('click','#container [name^=as_]',function(event) // WORKS IF ajax ASYNC = TRUE

        $("[name=areas][name^=as_]").on("click",function(event)  // DOES NOT WORK IF ajax ASYNC = TRUE.   Works if ASYNC = FALSE
        {
            // SAVE RADIO BUTTON DATA ON CLICK
        });
    }

只发送一个学生数组可能更好，例如：
[{“学生id”：1}，{“学生id”：2}，{“学生id”：3}，{“学生id”：4}]
和一个简单的
$.ajax（）
发送一个学生数组到服务器。是的，在这种情况下，发送学生数组可能是最好的解决方案。