DOMContentLoaded 事件似乎不起作用/我需要帮助了解它是如何工作的答案

【问题标题】：DOMContentLoaded event doesn't seem to be working/I need help understanding how it worksDOMContentLoaded 事件似乎不起作用/我需要帮助了解它是如何工作的
【发布时间】：2012-11-11 06:49:26
【问题描述】：

我正在开发一个简单的 chrome 扩展程序，当用户打开一个新选项卡时，它会显示一串文本。代码是：

<html>
    <head>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="showText.js"></script>
    </head>
    <body>
        <div id="textDiv">
            <h1 id="actualText"></h1>
        </div>
        <div id="footer">
            <img src="settings.png"/>
        </div>
    </body>
</html>

还有js文件

document.addEventListener("DOMContentLoaded", function () {
    var text = "sample text";
    $('#actualText').append(text);
});

当我打开一个新选项卡时，这似乎不起作用，但是当我单击选项卡上的刷新时，会显示文本。所以我猜想在这段代码运行之前第一次 DOMContentLoaded 事件已经被触发了？如果我将它加载到头部，那不应该是这样，对吧？如有任何帮助，我将不胜感激！

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

如果您使用的是 jquery，请执行以下操作：

$(function () {
    var text = "sample text";
    $('#actualText').append(text);
});

这将在文档准备好时调用该函数。 Apparently this is equivalent to DOMContentLoaded

【讨论】：

Check this fiddle。它似乎确实有效。确保 jquery 实际被加载。
是的，我认为这是一个 chrome 扩展的东西，而不是一个 JS 问题。我认为 jquery 已加载，因为当我刷新时，它确实显示了文本。再次感谢:)