Jquery事件处理代码在将脚本从外部js文件包含在head中之后将无法工作

Jquery event handling code doesnt work after including script in head from an external js file

本文关键字：head 之后 工作 js 代码 事件处理 脚本 从外部 Jquery 文件包      更新时间：2023-09-26

我在文档头中包含了一个脚本，其中包含以下jquery代码：

    $('.unappreciatedIcon').click(function() {
        alert('JS Works!');
    });

在我的文件正文中，我有以下内容：-

    <span class="unappreciatedIcon">.....</span>

但是，当我将脚本从外部js文件插入文档头时，没有显示alert。当我把这个脚本放在目标元素下面的主体中时，它完美地工作了。

感谢大家：

我正在使用以下代码：

$(document).ready(function(){
    $('.unappreciatedIcon').click(function() {
        alert('fds');
    })
});

您是否将jquery封装在$(document).ready(function() { // your code // });中？

如果没有，您的jquery代码将立即执行，并且浏览器尚未加载您的span。在分配事件之前，您需要等待文档准备就绪(使用上面的代码(。

更新

$(document).ready(function() {
    $('.unappreciatedIcon').click(function() {
        alert('JS Works!');
    });
});

运行脚本时，它会查找具有类unappreciatedIcon的元素。找不到任何内容，因为文档仍在解析中，并且到目前为止，文档中没有具有类unappreciatedIcon的节点。DOM是以增量方式构建的。

但是，当您将脚本放在span元素出现之后时，就会发现$('.unappreciatedIcon')，因为它已经被解析并添加到DOM中，所以单击处理程序与之绑定。

在就绪回调中运行代码。ready回调基本上是在解析完整个HTML并完全构建好DOM时运行的，这通常是开始运行依赖于DOM的JavaScript代码的安全点。

$(document).ready(function() { 
    $('.unappreciatedIcon').click(...)
});

或者将代码放在元素发生后(在这种情况下不需要将其封装在就绪回调中(，

<span class="someClass">..</span>
..
<script>
    $('.unappreciatedIcon').click(...)
</script>

只介绍基础知识，但您是否确保包含jquery库？如果它不起作用，并且它在代码中，你也可以用firebug在firefox中打开，转到控制台选项卡，看看你有什么错误。

在页面渲染完成之前，正在处理javascript。正如Erik Philips建议的那样，您需要将此语句放入$(document(.ready((函数中，以确保在评估语句之前加载页面。

$(document).ready(function(){
$('.unappreciatedIcon').click(function() {
 alert('JS Works!');
 });
});

这是小提琴http://jsfiddle.net/Pf4qp/

由于HTML是从上到下加载的，所以头在页面的其余部分之前加载。您可以通过将js文件的链接放在结束标记之前来解决这个问题。然而，通常最好将javascript链接放在头部。

更好的选择是在script标记中使用defer属性。

例如：

<script type="text/javascript" src="script.js" defer></script>

或

<script type="text/javascript" src="script.js" defer="defer"></script>

不过，第二种选择有点不必要。这个属性得到了很好的支持。Internet Explorer从5.5版本开始就支持它，尽管它在IE9中显然存在"漏洞"。自FireFox 3.5、Chrome 8.0、Safari 5.0以来，它一直得到全面支持。它也适用于所有当前的移动浏览器。不过，我想任何Opera浏览器都不支持它。

相关文章：