动态生成元素的 jQuery 选择器

Question

我有以下 html 片段:

<div id="contentX"><h1>MyHeading1</h1></div>

我可以通过以下方式成功选择 jQuery 片段:

console.log($('#contentX h1'));

输出为

[<h1>​MyHeading1​</h1>​]

但是，当我动态加载内容时，它不起作用。例如，

html代码片段:

<div id="content"></div>

jQuery 代码片段:

$('#content').load('foo.html')); // the content is loaded correctly with <h1> tag

jQuery 代码片段不工作:

console.log($('#content h1')); // it returns []. I was expecting to return something.

我想知道这是否与事件绑定(bind)类似:.click() 与 .live()。

预先感谢您的帮助。

Answer 1

load 函数是异步的，这意味着它会启动加载，然后在后台继续执行脚本的其余部分。

它不会首先等待加载完成。

您可以将一个函数附加到 load 调用中，以告诉 jQuery 在加载完成后执行此操作。
这是一个例子:

$('#content').load('foo.html', function() {     
    console.log($('#content h1'));
});