jquery - 为什么 jquery 在 .load() 之后看不到页面的变化？

Question

我刚刚尝试使用 jQuery 的 .load 方法更改我的页面内容。

虽然内容更改没有问题，但我发现如果我尝试选择某些内容，jQuery 仍然“看到”旧内容，例如：

页：

 <div id="mycontentarea">
   <div id="myfirstcontent"></div>
   <div id="mysecondcontent"></div>
</div>

替换内容：

<div id=mythirdcontent"></div>
<div id=myfourthcontent"></div>

javascript:

// replace original content
$('#mycontentarea').load('replacement.html');
// print out the id of the first child
console.log($("#mycontentarea").children().attr("id"));

控制台将打印出“myfirstcontent”而不是“mythirdcontent”——为什么？

Answer 1

因为load是异步的，并且您的console.log调用在替换发生之前执行。

将依赖于调用结果的任何代码移至load成功完成后执行的回调：

$('#mycontentarea').load('replacement.html', function() {
    //Anything in here is executed once the content has been returned successfully
    console.log($("#mycontentarea").children().attr("id"));
});

从上的文档load：

如果提供了“完成”回调，则在执行后处理和 HTML 插入后执行。回调会为 jQuery 集合中的每个元素触发一次，并依次设置为每个 DOM 元素。