JS& jQuery无法检测到html元素，并说它们是未定义的 [英] JS & jQuery can't detect html elements, and say's they are undefined
问题描述
我是JS和 jQuery 的新手，我正在尝试制作使用它们的字幕播放器。不幸的是，我陷入了很早的阶段。
I'm pretty new to JS and jQuery, and i'm trying to make a subtitles player using them. Unfortunately, i'm stuck in a very early stage.
当我试图选择一些 HTML 元素时通过一个.js文件，它就像找不到我要求的元素一样，没有任何反应。如果我尝试提醒元素的值或HTML，它会提醒 undefined 。
When I'm trying to select some HTML elements through a .js file, it acts like it can't locate the element I'm asking for, and nothing happens. If I try to alert the value or the HTML of the elements, it alerts 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');
});
谢谢。
推荐答案
因为你的脚本标签 上面是定义它所作用的元素的HTML，所以它找不到它们，因为它们是在该代码运行时不存在。以下是页面中发生的事情的顺序：
Because your script tag is above the HTML defining the elements that it acts on, it can't find them because they don't exist as of when that code runs. Here's the order in which things are happening in your page:
-
html和head元素已创建 - 已创建
元元素，并注明其内容解析器 - 创建了jQuery的
脚本元素 - 解析器停止并等待加载jQuery文件
- 加载后，执行jQuery文件
- 解析继续
- 创建代码的
脚本元素 - 解析器停止并等待要加载您的文件
- 加载后，您的脚本代码就会运行—并且没有找到任何元素，因为没有
div元素 - 解析继续
- 浏览器完成解析和构建页面，其中包括创建您尝试在脚本中访问的元素
- The
htmlandheadelements are created - The
metaelement is created and its content noted by the parser - The
scriptelement for jQuery is created - The parser stops and waits for the jQuery file to load
- Once loaded, the jQuery file is executed
- Parsing continues
- The
scriptelement for your code is created - The parser stops and waits for your file to load
- Once loaded, your script code is run — and doesn't find any elements, because there are no
divelements yet - Parsing continues
- The browser finishes parsing and building the page, which includes creating the elements you're trying to access in your script
如何使用纠正它：
-
将
脚本元素移到最后，就在结束< / body>标记之前，所以在代码运行之前存在所有元素。除非有充分的理由不这样做，这通常是最好的解决方案。
Move the
scriptelements to the very end, just before the closing</body>tag, so all of the elements exist before your code runs. Barring a good reason not to do this, this is usually the best solution.
使用jQuery的 ready 功能。
Use jQuery's ready feature.
使用< a href =http://www.w3.org/TR/html5/scripting-1.html#attr-script-async =nofollow> 推迟脚本元素上的属性，但要注意并非所有浏览器都支持它。
Use the defer attribute on the script element, but beware that not all browsers support it yet.
但是，如果您控制脚本元素的去向，＃1通常是您最好的选择。
But again, if you control where the script elements go, #1 is usually your best bet.
这篇关于JS& jQuery无法检测到html元素，并说它们是未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
