Question

以下代码段有效：

<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>
<script type="text/javascript">
$($("#btnCapturePhoto").click(function captureImage() {
    alert('capture button clicked');
}));
</script>

此代码不起作用：

<script type="text/javascript">
$($("#btnCapturePhoto").click(function captureImage() {
    alert('capture button clicked');
}));
</script>
<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>

为什么呢？我无法理解脚本标记位置与它们关联的HTML标记之间的关系。在某些情况下，我在HTML标记上方放置了一个脚本标记（例如对于JQueryIU datepicker），并且该脚本可以工作，例如：

<script type="text/javascript">
$(function() {
    $("#myinput").datepicker();
});
</script>
<input type="text" id="myinput" />

有人可以解释何时在HTML标记的上方或下方放置代码吗？

Answer 1

在不起作用的示例中，您的jQuery代码尝试查找#btnCapturePhoto，但

<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>

在DOM中尚不存在，因为它列在源文件中的jQuery代码之后。

使用表格：

$(function() {
    $("#myinput").datepicker();
});

确保在jQuery代码运行之前完全加载DOM，因此确实找到了ID。文档准备就绪时会运行$(function()...。

Answer 2

您应该将所有脚本放在外部.js文件中，并在jQuery之后将其加载到HTML的底部。

但是，让我们看一下你的特定代码工作和不工作的原因。

<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>
<script type="text/javascript">
$($("#btnCapturePhoto").click(function captureImage() {
    alert('capture button clicked');
}));
</script>

这是有效的，因为执行脚本时存在元素#btnCapturePhoto。

<script type="text/javascript">
$(function() {
    $("#myinput").datepicker();
});
</script>
<input type="text" id="myinput" />

这是有效的，因为你将脚本包装在一个简短的文档就绪处理程序中（$(function(){..这个部分）

Answer 3

我同意上述答案，但我认为解释这个问题会有所帮助，然后为将来提供一些建议。

解答：浏览器从上到下加载HTML，因此首先执行您的JavaScript。由于您的JS首先被加载，因此它正在寻找的元素尚未加载，因此尚不存在。这就是它失败的原因。

忠告：通常情况下，建议在标记之前将CSS加载到头部并将JS加载到身体末端。

<html>
<head>
    <!-- your CSS should go here -->
</head>
<body>
    <SomeElement></SomeElement>
    <SomeElement></SomeElement>
    <SomeElement></SomeElement>
<script type="text/javascript>
    //your javascript code
</script>
</body>
</html>

您通常希望这样做的原因是因为它将允许您的DOM在执行任何JS代码之前就绪。这意味着您可以在执行代码之前规避需要触发的就绪事件。这也意味着，如果您的页面需要外部JS文件，可能需要一段时间来加载您的用户，至少可以在加载之前查看DOM的某些部分。如果您要加载相当大的单页面应用程序，这可能对您有利。在设计网页时，此链接有一些很好的信息，可能对您学习HTML，CSS和JS的过程有所帮助。 http://developer.yahoo.com/performance/rules.html

Answer 4

在前两个示例中，您将在加载脚本后立即将处理程序绑定到锚点的click事件。第一个示例有效，因为您的脚本引用的锚点在脚本之前立即加载。

在第二个示例中，在脚本尝试选择它之后加载锚点，因此找不到任何内容，并且没有处理程序绑定到click事件。

在您的第三个示例中，您使用的是$(function() { ...，相当于$(document).ready(function() {...。这等待直到DOM完全加载（a.k.a页面上的所有HTML都由Javascript引擎注册），然后在处理程序中执行脚本。

与HTML相关的Javascript / JQuery脚本放置

4 个答案: