jquery - $(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

我还有另一个 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，它将被插入到 #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 回调中调用。