我有一个名为 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(内容)。
最佳答案
我认为你的错误是当你的主页的 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 回调中调用。
关于jquery - $(document).ready() 在 jQuery-AJAX 调用中立即触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11206115/