JS & jQuery 无法检测到 html 元素，并说它们是未定义的

IT技术 javascript jquery
2021-02-02 02:40:34

我对 JS 和 非常陌生jQuery，我正在尝试使用它们制作字幕播放器。不幸的是，我被困在一个非常早期的阶段。

当我尝试HTML通过 .js 文件选择一些元素时，它表现得好像无法找到我要求的元素，但没有任何react。如果我尝试提醒元素的值或 HTML，它会提醒undefined.

所以这是代码：

HTML

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="jquery-2.1.3.min.js"></script>
        <script src="script.js"></script>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;           
            }           
            #wrapper{
                width: 150px;
                text-align: center;
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
                padding: 10px 2px;
            }
            h3{
                font-family: Arial, Helvetica, sans-serif;
            }
            img{
                width: 50px;
                margin: 0 auto;     
            }
            input{
            display: none;          
            }
        </style>


    </head>
    <body>
        <div id="wrapper">
            <h3>Select subtitles file</h3>
                <img src="browse.png" alt="browse">
        </div>
        <input type="file" accept=".srt" id="file">
    </body>
</html>

脚本.js

$("div").click(function () {
    console.log('loaded');
});

谢谢。

4个回答

因为你的script标签上面的HTML定义，它作用于的元素，它无法找到他们，因为他们不为运行代码的时候存在。以下是页面中发生的事情的顺序：

  1. 的html和head创建的元素
  2. 在meta创建元素及其含量注意到解析器
  3. scriptjQuery的元素被创建
  4. 解析器停止并等待 jQuery 文件加载
  5. 加载后，将执行 jQuery 文件
  6. 解析继续
  7. 在script创建您的代码元素
  8. 解析器停止并等待您的文件加载
  9. 加载后，您的脚本代码就会运行 — 并没有找到任何元素，因为还没有div元素
  10. 解析继续
  11. 浏览器完成页面的解析和构建，包括创建您尝试在脚本中访问的元素

纠正方法：

  1. 将script元素移到最后，就在结束</body>标记之前，因此所有元素在代码运行之前都存在。除非有充分的理由不这样做，否则这通常是最好的解决方案。

  2. 使用 jQuery 的ready特性。

  3. 在 script 元素上使用该defer属性，但要注意并非所有浏览器都支持它。

但同样，如果你控制脚本元素的去向，#1 通常是你最好的选择。

最后，对我的 MSO 问题的一个很好的回答：meta.stackoverflow.com/questions/287905/...
2021-03-12 02:40:34
好的，确实帮我解决了问题，理解了流程，非常感谢！
2021-04-01 02:40:34

当您调用 .click() 方法时，dom 未完全加载。您必须等到 DOM 中的所有内容都加载完毕。因此您必须将 script.js 更改为：

$(document).ready(function(){
$("div").click(function () {
    console.log('loaded');
});
});

您应该在 DOM Ready 事件之后执行您的脚本。在 jquery 中，它是这样的：

$(function(){
    $("div").click(function () {
            console.log('loaded');
    })
});


$(document).on('click', "element" , function (ev) {
    console.log('loaded');
})

})

其它你可能感兴趣的问题
上一篇使用 bluebird Promise的异步异常处理 下一篇JavaScript 中的逻辑运算符——你如何使用它们？