用于动态生成元素的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.

我想知道这是否是类似于事件绑定的行为:.click()vs .live().

在此先感谢您的帮助.

Answer 1

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

它不等待load先完成.

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

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