Question

我写了一个简单的测试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>

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

Answer 1

在document.ready function

中调用它

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

或

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

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

Answer 2

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

当脚本加载到正文中时，在页面中脚本位置上方呈现的任何元素都将可见。渲染元素时，会将其添加到允许定位的DOM（Document Object Model）中。这就是为什么页面中加载的脚本正确执行。

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

$(function(){
 //code to run when the document loads
});

Answer 3

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

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

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

Answer 4

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

您应该使用$.ready()包装绑定调用：

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

...或使用委托：

    jQuery( document ).on( 'click', '#h2t', function() {
        alert("123");
    });

为什么导入js文件的位置会影响我的调用？

4 个答案: