JS和jQuery无法检测html元素,并说它们未定义

Question

JS和jQuery无法检测html元素,并说它们未定义

我是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>

Run Code Online (Sandbox Code Playgroud)

的script.js

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

Run Code Online (Sandbox Code Playgroud)

谢谢.

Answer 1

T.J*_*der 9

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

的html和head创建的元素
在meta创建元素及其含量解析器注意
scriptjQuery 的元素已创建
解析器停止并等待加载jQuery文件
加载后,执行jQuery文件
解析仍在继续
script您的代码的元素已创建
解析器停止并等待您的文件加载
加载后,您的脚本代码将运行 - 并且找不到任何元素,因为还没有div元素
解析仍在继续
浏览器完成解析和构建页面,其中包括创建您尝试在脚本中访问的元素

如何纠正它:

将script元素移动到最后,就在结束</body>标记之前,因此在代码运行之前存在所有元素.除非有充分的理由不这样做,这通常是最好的解决方案.
使用jQuery的ready功能.
在script元素上使用该defer属性,但要注意并非所有浏览器都支持它.

但同样,如果您控制脚本元素的位置,#1通常是您最好的选择.

归档时间：	10 年，10 月前
查看次数：	5611 次
最近记录：	6 年，11 月前