我正在开发一个jquery / ajax项目。在准备好文档时，我有以下代码：
$(document).ready(function () {
$.ajax({
url: '/Main/ReturnGroups/',
dataType: "json",
success: function (data) {
$('.column').each(function (index) {
let indexVar = index;
let colID = $(this).attr("id");
for (let i = 0; i < data.length; i++) {
if ($(this).attr("id") == data[i].ColumnID) {
let thisID = $(this).attr("id");
let thisGroupID = data[i].ID;
$.ajax({
url: '/Main/GetFullGroup/',
data: { groupID: thisGroupID },
success: function (html) {
$('#' + thisID).append(html); //this html inserts a portlet (JqueryUI) based element
}
});
}
}
})
},
complete: function () {
alert($('.portlet').length); //returns 0 (leads me to believe its being run before success function
AddPageProperties(); //this function is supposed to add a bunch of classes to the elements injected in the success function but doesnt actually add the classes when its here
}
});
})
在我看来，complete：函数的内容与success函数异步运行。根据我的理解，完成函数的目的是在完成ajax成功（或错误）功能后运行。
代码迭代所有列并返回我数据库中具有相同列id的所有组，然后将groupID传递给另一个webmethod，然后查询所有任务并使用传入的groupID仅拉取任务与该组相关联，然后使用该数据注入部分视图以将任务/组放置在各自的位置。
我尝试的事情：
- 在按钮单击中输入AddPageProperties（）函数，在完成ajax后，单击按钮。这完全符合预期。
- 使用ajaxStop（）。虽然这确实可以正常工作，但是一旦我提交另一个 ajax请求，它就会再次运行该函数，从而复制代码。当元素在屏幕上移动时，我的项目使用ajax请求，因此这不起作用。
- 尝试并获取元素的详细信息，以便在运行complete：function（）时首先查看html是否存在。代码段中的警报返回0，这使我相信在执行该警报时HTML不存在。
- 使用每个函数的索引来确定迭代的结束，然后运行该函数，但同样不再在函数中应用类。我试图再次发出警报，看看元素是否存在，但它们不存在。
-set async为false，但浏览器只是说它已被弃用且不会改变任何行为
对于解决方案的任何建议表示赞赏。我的目标是，一旦注入所有HTML，然后只运行此函数，并且再也不会再次重新加载页面。
我想坚持使用JQuery / ajax，因为我的项目依赖于JQuery for Bootstrap。