jQuery中的document.ready函数没有触发事件

Question

我想在jQuery中触发一些事件。我的触发器功能不在document.ready函数中。它不工作。如果我把代码放在document.ready中，它就起作用了。

即使它们不在document.ready函数中，也触发了一些其他事件。

请让我清楚为什么某些事件只能在document.ready函数内工作的功能。

感谢

Answer 1

Web浏览器执行遇到当这一切立即JS，即使网页没有加载完成。在情况中，你应该期望当你的JS执行时，部分或全部DOM仍然不可用，因为它仍然从服务器上下载。

将事件处理程序附加到元素仅在DOM中存在这些元素时才起作用，因此可以在您尝试附加它们时选择它们。因为选择器（.some_element_not_yet_loaded）与任何内容都不匹配，所以发出命令$('.some_element_not_yet_loaded').click(function(){alert('Element Clicked')})是无效的。

确保您尝试附加处理程序的元素存在于DOM中的唯一方法是等待，直到document.ready事件被触发为止（直到DOM确实完成加载后才会触发此事件并且实际上准备好了）。

你看到不一致的行为的原因是因为这是一个经典的竞争条件 - 基于从服务器加载DOM的速度或速度有多快，并由浏览器初始化确定哪些元素出现在你的JS执行。在某种程度上，您可以通过将JS移动到页面底部来进行欺骗，但是因为DOM从JS的执行异步初始化，所以偶尔会导致问题。因此，最好将所有JS初始化代码放在document.ready事件中，以完全确保DOM已完全加载并准备就绪。