1

我写了一个简单的测试js文件（test.js）如下：

jQuery("#h2t").click(function() {
    alert("123");
});

然后我将它包含在一个 jsp 页面（test.jsp）中：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="resources/js/jquery.min.js"></script>
        <script src="resources/js/test.js"></script>
    </head>
    <body>
        <a id="h2t" href="#">test link</a>
    </body>
</html>

但是当我点击超链接时这不起作用test link。如果我移动包含代码after the <a> tag，它工作正常：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="resources/js/jquery.min.js"></script>
    </head>
    <body>
        <a id="h2t" href="#">test link</a>
        <script src="resources/js/test.js"></script>
    </body>
</html>

谁能告诉我为什么顺序会影响方法的调用，我怎样才能将 js 文件包含在<head>字段中并仍然使其工作？非常感谢！

4

4 回答 4

2

在 document.ready 函数中调用它

jQuery(function() {
    jQuery("#h2t").click(function() {
        alert("123");
    });
});

或者

jQuery(document).ready(function() {
        jQuery("#h2t").click(function() {
            alert("123");
        });
   });

参考：http ://api.jquery.com/ready/

于 2013-04-16T02:52:15.783 回答
2

顺序非常重要。当脚本加载到头部时，任何立即执行的代码都会运行。如果该代码在页面上查找任何元素，例如一个 with ，id=h2t那么它将找不到该元素，因为页面尚未呈现，因此不会执行任何操作。

当脚本加载到正文中时，页面中脚本位置上方呈现的任何元素都将可见。当一个元素被渲染时，它被添加到允许定位它的 DOM（文档对象模型）中。这就是页面中加载的脚本正确执行的原因。

解决此问题的常用方法是等待文档完成加载所有元素。jQuery 有一个很好的处理程序，它被称为ready，并且它有这个简写符号：

$(function(){
 //code to run when the document loads
});
于 2013-04-16T02:56:25.800 回答
2

页面从上到下加载，因此在第一个脚本中，您的 js 在#h2t创建之前执行，因此您将无法选择它。
在您的第二个脚本中，您的 js#h2t在 dom 中创建后执行，因此可以使用jQuery("#h2t").

如果您不想将 js 放在元素之后或页面末尾，您可以使用$(document).ready这将等到整个 dom 加载然后执行代码。

jQuery(document).ready(function(){
    jQuery("#h2t").click(function() {
        alert("123");
    });
});
于 2013-04-16T02:57:40.717 回答
0

在您的第一个示例中，调用事件绑定时元素#h2t尚不存在。在第二个示例中，该元素在调用绑定时已加载。

你应该用一个包装你的绑定调用$.ready()：

$( document ).ready( function () {
    jQuery("#h2t").click(function() {
        alert("123");
    });
});

...或使用委托：

    jQuery( document ).on( 'click', '#h2t', function() {
        alert("123");
    });
于 2013-04-16T02:59:15.730 回答