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

我写一个简单的测试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>字段中并使它仍然起作用？非常感谢！

最佳答案

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

将脚本加载到正文中后，页面中脚本位置上方呈现的任何元素都将可见。呈现元素时，会将其添加到DOM（Document Object Model）中，以便对其进行定位。这就是为什么页面中加载的脚本可以正确执行的原因。

解决此问题的常用方法是等待文档完成所有元素的加载。 jQuery为此提供了一个很好的处理程序，称为ready，它具有以下简写形式：

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

关于javascript - 为什么导入js文件的位置会影响我的调用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16027978/

JS文件

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