$(document).ready() 在 jQuery-AJAX 调用中立即触发

Question

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

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

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

$("#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 完成加载所有通过 load() 函数加载的新 DOM（内容）。

Answer 1

我认为您的错误是当您的主页的 DOM 第一次准备好时调用 $(document).ready。更改 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 页面中，仅在 DOM 准备好时调用 $("#display_area").load("search.html")。因此，请从您的主页中的$(document).ready 函数进行此调用
• 接下来，使用我描述的.load的回调函数，在里面做你想做的事
• 最后，如果您希望 search.html 中的代码在加载后执行：在您的主页和 search.html 之间约定一个函数名称。此函数在 search.html 中定义并从 .load 回调中调用。

Answer 2

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

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