我是JS和的新手jQuery,我正尝试使用它们制作字幕播放器。不幸的是,我还处于早期阶段。
jQuery
当我尝试HTML通过.js文件选择某些元素时,它的行为就像找不到所需的元素,并且什么也没有发生。如果我尝试提醒元素的值或HTML,它会提醒undefined。
HTML
undefined
所以这是代码:
<!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定义,它作用于的元素,它无法找到他们,因为他们不为运行代码的时候存在。这是您页面中事物发生的顺序:
script
html
head
meta
div
纠正方法:
将script元素移到最末端,就在结束</body>标记之前,因此所有元素在代码运行之前就存在。除非有充分的理由不这样做,通常这是最好的解决方案。
</body>
使用jQuery的ready功能。
ready
使用script元素上的defer属性,但要注意,并非所有浏览器都支持该属性。
defer
但同样,如果您控制脚本元素的位置,通常#1通常是最好的选择。