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

===============>>#1 票数: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/

===============>>#2 票数:2

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

将脚本加载到正文中后,页面中脚本位置上方呈现的任何元素都将可见。 呈现元素时,将其添加到DOM( 文档对象模型 )中,以便对其进行定位。 这就是为什么页面中加载的脚本可以正确执行的原因。

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

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

===============>>#3 票数:2

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

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

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

===============>>#4 票数:0

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

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

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

...或使用委派:

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

  ask by Judking translate from so

未解决问题?本站智能推荐: