JS＆jQuery无法检测到html元素，并说他们是未定义的
我对JS和jQuery相当jQuery ，而且我正在尝试使用它们的字幕播放器。 不幸的是，我陷入了一个很早的阶段。
当我试图通过.js文件select一些HTML元素时，它的行为就像无法find我所要求的元素，而且什么也没有发生。 如果我尝试提醒元素的值或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'); });
谢谢。
由于script标记位于定义其所作用的元素的HTML之上，所以无法find它们，因为它们在代码运行时不存在。 以下是页面中发生事件的顺序：
-
html和head元素被创build -
meta元素被创build，其内容被parsing器logging下来 - jQuery的
script元素被创build - parsing器停止并等待加载jQuery文件
- 一旦加载，jQuery文件被执行
- parsing继续
- 您的代码的
script元素被创build - parsing器停止并等待您的文件加载
- 一旦加载，您的脚本代码就会运行 – 并且没有find任何元素，因为还没有
div元素 - parsing继续
- 浏览器完成parsing和构build页面，其中包括创build您试图在脚本中访问的元素
方法来纠正它：
-
将
script元素移到最后，就在closures</body>标记之前，因此所有元素都存在于代码运行之前。 除非有好的理由不这样做，这通常是最好的解决scheme。 -
使用jQuery的
readyfunction 。 -
使用脚本元素上的
defer属性 ，但是要注意并非所有的浏览器都支持它。
但是，如果你控制脚本元素的位置，＃1通常是你最好的select。
当您调用.click（）方法时，dom未完全加载。 你必须等到DOM中的所有东西都被加载了。所以你必须把你的script.js改为：
$(document).ready(function(){ $("div").click(function () { console.log('loaded'); }); });
您应该在DOM Ready事件之后执行您的脚本。 在jQuery中它是这样做的：
$(function(){ $("div").click(function () { console.log('loaded'); }) });
