0

以下代码片段有效:

<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 日期选择器),并且该脚本有效,例如:

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

有人可以解释一下何时将代码放在 HTML 标记之上或之下吗?

4

4 回答 4

1

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

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

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

使用表格:

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

确保在您的 jQuery 代码运行之前 DOM 已完全加载,因此确实找到了 ID。 $(function()...文档准备好时运行。

于 2013-03-21T02:50:25.460 回答
1

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

但是让我们看看您的特定代码工作和不工作的原因。

<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(){..这部分)

于 2013-03-21T02:50:41.183 回答
1

我同意上面的答案,但我认为解释这个问题对你有帮助,然后为未来提供一些建议。

解答: 浏览器从上到下加载您的 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

于 2013-03-21T04:15:00.537 回答
0

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

在第二个示例中,在脚本尝试选择锚点后加载锚点,因此没有找到任何处理程序,也没有处理程序绑定到 click 事件。

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

于 2013-03-21T02:56:09.813 回答