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

I have an html page called search.html that contains the following jQuery code :

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

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

And I have another html page that contains the following jQuery code:

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

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

The problem is, when this jQuery code is called, it inserts the content of search.html but executes the code that I'm interested in (the code in the $(document).ready() section) immediately, it doesn't wait for the DOM to be ready, which obviously generates errors.

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

The other codes (outside the $(document).ready() section) execute normally without any problems.

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

Placing the code within the callback function of the .load() function doesn't work either, the code fires while the DOM isn't ready.

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

Is there any way to solve this ? Any help would be appreciated.

有什么方法可以解决这个问题吗?任何帮助,将不胜感激。

EDIT : I just want to specify, that the search.html contains a DOM of its own that is going to be inserted in the #display_area div, and I want my code to fire when the #display_area div has finished loading all its new DOM (content) that was loaded through the load() function.

编辑:我只想指出,search.html包含一个自己的DOM,它将被插入到#display_area div中,我希望我的代码在#display_area div完成加载所有新DOM时触发通过load()函数加载的(内容)。

2 个解决方案

#1

I think your mistake is that $(document).ready is called when your main page's DOM is ready the first time. Changing the DOM doesn't re-fire $(document).ready. Your confusion comes from the fact that you call $("#display_area").load("search.html") when the page loads. At that time, the original DOM is not finished yet, when it is, $(document).ready is fired, later (at some random moment) your Ajax function returns. And that's it.

我认为你的错误是当你的主页的DOM第一次就绪时调用了$(document).ready。更改DOM不会重新启动$(document).ready。您的困惑来自于您在页面加载时调用$(“#display_area”)。load(“search.html”)这一事实。那时,原始DOM还没有完成,当它是,$(document).ready被激活,稍后(在某个随机时刻)你的Ajax函数返回。就是这样。

To execute code after your Ajax .load function returns, use this

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

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

Edit: OK, so here's the whole scheme:

编辑:好的,所以这是整个方案:

In your main html page, call $("#display_area").load("search.html") only when the DOM is ready. So do this call from a $(document).ready function in your main page

在主html页面中,只有在DOM准备就绪时才调用$(“#display_area”)。load(“search.html”)。所以从主页面中的$(document).ready函数调用此函数

Next, use the callback function of .load as I described, do whatever you want in there

接下来,按照我的描述使用.load的回调函数,在那里做任何你想做的事情

Finally, if you want code in search.html to be executed after it is loaded: agree upon a function name between your main page and search.html. This function is defined in search.html and called from the .load callback.

最后,如果您希望search.html中的代码在加载后执行:同意主页和search.html之间的函数名称。此函数在search.html中定义,并从.load回调中调用。

#2

$(document).ready() in search.html will fire off when search.html is loaded, which will occur when .load() is done, even if the other page is not done loading.

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

You could try placing the JS code on search.html in a normal function and then in the callback function of .load() you call this 'newly added' function. Populating the div can still occur in the .load() callback function.

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

#1