小编典典

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

javascript

我是JS和的新手jQuery,我正尝试使用它们制作字幕播放器。不幸的是,我还处于早期阶段。

当我尝试HTML通过.js文件选择某些元素时,它的行为就像找不到所需的元素,并且什么也没有发生。如果我尝试提醒元素的值或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>

script.js

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

谢谢。


阅读 320

收藏
2020-04-25

共1个答案

小编典典

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

  1. htmlhead创建的元素
  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通常是最好的选择。

2020-04-25