javascript - 等待 jquery 加载 HTML，然后删除项目

Question

使用下面的代码:

function create_table() {
    $.ajax({
        method: "GET",
        url: "/api/data/",
        success: function(data){
            $('#table').load('http://127.0.0.1:8000/results');
            $('#go_back').remove();
        },
        error: function(error_data){
            console.log("errorrr")
            console.log(error_data)
        }
    })
}
document.getElementById("create_table").onclick = function() {
    create_table();
    return false;
}

我想在 #table 元素加载后删除 #go_back 元素。问题是它没有被删除，因为代码没有等待 #go_back 出现。

如何让脚本在那些 .load 和 .remove 方法之前等待？

Answer 1

您遇到的问题是 load 函数是异步的，而您调用的 remove 函数是同步的。事件的大致顺序如下。

• 执行 AJAX 请求
• AJAX 请求返回成功
• 调用成功回调
• load 函数对本地主机进行第二次异步调用，以将结果加载到 ID 为 table 的元素中
• “加载”功能需要一些时间才能完成
• 同时调用remove函数
• remove 函数检查 DOM(文档对象模型)以查找与 ID go_back 匹配的元素
• 没有找到匹配的元素，因为load函数还没有返回
• load 函数返回，并填充表格元素的内部 HTML

您的问题的解决方案是了解必须在加载函数返回之后对表格元素的内容进行任何更改。这是通过查阅 jQuery 文档来完成的 jQuery Load了解如何放置 Hook 以完成 load 函数。此修改应完成您想要的:

$('#table').load('http://127.0.0.1:8000/results', function(){
     $('#go_back').remove();
});

本质上是给load函数传递第二个参数，这是另一个回调函数。在这个回调函数中，任何代码都会在表格元素的内部内容被修改后执行。因此，应该找到并删除 go_back 元素。