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，它将被插入到#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（）回调函数中进行。

$（document）.ready（）在jQuery-AJAX调用中立即触发

2 个答案: