4

我有一个名为的 html 页面search.html，其中包含以下 jQuery 代码：

$(document).ready(function(){
...some code // THIS IS THE CODE I'M INTERESTED IN
}
...some other code

我还有另一个 html 页面，其中包含以下 jQuery 代码：

$("#display_area").load("search.html") // #display_area is a div

问题是，当调用此 jQuery 代码时，它会立即插入内容search.html但执行我感兴趣的代码（$(document).ready() 部分中的代码），它不会等待DOM 准备就绪，这显然会产生错误。

其他代码（在 $(document).ready() 部分之外）正常执行，没有任何问题。

将代码放在 .load() 函数的回调函数中也不起作用，代码会在 DOM 未准备好时触发。

有没有办法解决这个问题？任何帮助，将不胜感激。

编辑：我只想指定search.html包含自己的 DOM，该 DOM 将插入 #display_area div 中，并且我希望我的代码在 #display_area div 完成加载其所有新 DOM（内容）时触发通过 load() 函数加载的。

4

2 回答 2

3

我认为你的错误是$(document).ready当你的主页的 DOM 第一次准备好时调用它。更改 DOM 不会重新触发$(document).ready。您的困惑来自您$("#display_area").load("search.html")在页面加载时调用的事实。那时，原始 DOM 还没有完成，当它完成时，$(document).ready被触发，稍后（在某个随机时刻）你的 Ajax 函数返回。就是这样。

要在 Ajax .load 函数返回后执行代码，请使用

$("#display_area").load("search.html", function() { 
    alert('New DOM elements should be available now'); 
    // do more stuff 
} );

编辑：好的，这是整个方案：

  • 在您的主 html 页面中，$("#display_area").load("search.html")仅在 DOM 准备好时调用。所以从你的主页中的$(document).ready一个函数中调用
  • 接下来，使用我描述的 .load 的回调函数，在那里做任何你想做的事
  • 最后，如果您希望 search.html 中的代码在加载后执行：在您的主页和 search.html 之间约定一个函数名称。此函数在 search.html 中定义并从 .load 回调中调用。
于 2012-06-26T11:31:30.297 回答
2

search.html 中的 $(document).ready() 将在 search.html 加载时触发，这将在 .load() 完成时发生，即使其他页面未完成加载。

您可以尝试将 JS 代码放在 search.html 中的普通函数中，然后在 .load() 的回调函数中调用此“新添加”函数。填充 div 仍然可以在 .load() 回调函数中进行。

于 2012-06-26T11:33:07.533 回答