Question

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

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

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

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

但是当我从外部js文件将脚本插入文档头时，没有显示alert。当我把这个脚本简单地放在目标元素下面时，这种方法完美无缺。

谢谢大家：

我正在使用以下代码：

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

Answer 1

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

中

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

<强>更新

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

Answer 2

当您的脚本运行时，它会查找具有类unappreciatedIcon的元素。没有找到任何内容，因为文档仍在被解析，并且到目前为止文档中没有可用类unappreciatedIcon的节点。 DOM正在逐步构建。

但是当您在span元素发生后放置脚本时，找到了$('.unappreciatedIcon')，因为它已经被解析并添加到DOM中，因此点击处理程序与它绑定。

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

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

或在元素出现后放置代码（在这种情况下不需要将其包装在ready回调中），

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

由于HTML从上到下加载，因此头部会在页面的其余部分之前加载。您可以通过在结束标记之前放置指向js文件的链接来解决此问题。但是，通常更好的做法是将javascript链接放在头脑中。

更好的选择是在脚本标记中使用延迟属性。

例如：

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

或

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

第二种选择是不必要的。这个属性得到了很好的支持。自5.5版以来，Internet Explorer一直支持它，虽然它显然是通过IE9“buggy”。自FireFox 3.5，Chrome 8.0，Safari 5.0以来，它已得到完全支持。它也适用于所有当前的移动浏览器。我想任何Opera浏览器都不支持它。

从外部js文件包含脚本后，Jquery事件处理代码不起作用

谢谢大家：

6 个答案: