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'));
});

Answer 2

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

Answer 3

Load是jQuery的简写AJAX方法之一，与动画函数和其他方法相同，它不会等到它完成加载外部文件（foo.html）才能运行。尝试将console.log（或任何你想要的）作为回调：

(...).load([url], function() {
  console.log("whatever");
}

您还可以在尝试获取页面时使用回调来捕获错误：

(...).load([url], function(response, status, xhr) {
  if (status == "error") {
    alert("Well, that didn't really work, here's the reason why:" + xhr.statusText);
  }
}

请参阅jQuery API的.load页面进一步挖掘：http://api.jquery.com/load/

希望这适合你

用于动态生成元素的jQuery选择器

3 个答案: