无法使用 jQuery 从 DOM 访问带有 document.ready 的元素？答案

【问题标题】：Can't access elements with document.ready, from the DOM with jQuery?无法使用 jQuery 从 DOM 访问带有 document.ready 的元素？
【发布时间】：2012-07-21 00:11:17
【问题描述】：

我写了一个 Chrome 插件，我正在听这样的“DOM 就绪事件”：

$(document).ready(function () {
    //here I select some elements and remove them.
});

有时我无法得到我想要的元素，即使它们确实存在。但是当页面被加载时，我打开开发者工具并在控制台中运行相同的代码，它又可以工作了。

我很困惑为什么当 DOM 准备好时我无法获取元素，而我编写的代码是正确的。

【问题讨论】：

可能元素在 DOM 就绪时不可用，但稍后添加......例如，JavaScript 函数可能在 DOM 就绪后动态生成内容。
您确定元素存在并且没有插入作为对 Ajax 调用的响应吗？

标签： jquery dom google-chrome-extension

【解决方案1】：

听起来您正在寻找的元素是在 DOM 准备好之后添加的。

尝试将您的 document.ready 换成下面的功能。

$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

jQuery 提供了两种强大的方法来执行代码和附加事件处理程序：$(document).ready 和 $(window).load。当 HTML 文档被加载并且 DOM 准备就绪时，文档就绪事件已经执行，即使所有的图形还没有加载。如果您想在窗口加载之前为某些元素关联事件，那么 $(document).ready 是正确的地方。

窗口加载事件在整个页面完全加载后执行，包括所有框架、对象和图像。因此，涉及图像或其他页面内容的函数应放置在窗口或内容标签本身的加载事件中。

取自 http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

【讨论】：

谢谢你的回答，你是对的，我只是在文档准备好时尝试记录 html，但我找不到我想要的元素。所以我知道元素是稍后添加的。

【解决方案2】：

如果 DOM 真的准备好了，并且元素以后没有被其他代码添加，那么它们将在那里被发现。如果您没有找到它们，则表明您正在使用的选择器存在问题，或者表明它们是由其他代码添加的（而不是在标记中）。

【讨论】：