1

html文件：

<html>
    <head>
    </head>  
    <body>
        <script src="jquery.min.js"></script>
        <script src="popup.js"></script>
        <div id="clickem">click me</div>
    </body>
</html>

popup.js：

$("#clickem").click(function() {
    alert("I was clicked.");
});

嗯...所以当我这样做时，什么都没有发生。

4

6 回答 6

3 
$(document).ready(function(){
 $("#clickem").click(function() {
     alert("I was clicked.");
 });
});

将您的代码包装在document.ready.

于 2013-03-01T11:58:23.447 回答
1

使用 DOM 就绪事件：

$(function(){
    $("#clickem").click(function() {
        alert("I was clicked.");
    });
});

<div id="clickem">click me</div>查询 DOM 时尚未呈现。
当您向 jQuery“构造函数”发送一个函数时，它将在 DOM 准备好时执行它。

$( function() { });相当于$(document).ready( function() { });。
所以，两者都可以使用。

于 2013-03-01T11:58:35.553 回答
0

绑定单击事件时，#clickem 不存在于 DOM 中。用于.on()将事件绑定到其中的任何current or future元素document。在这种情况下，您不需要使用$(document).ready().

popup.js

var onClickEm = function() {
    alert("I was clicked.");
};

$(document).on('click', '#clickem', onClickEm);

另一种选择是推迟加载 javascript 文件。

<html>
    <head>
    </head>  
    <body>
        <script src="jquery.min.js"></script>
        <script src="popup.js" defer></script>
        <div id="clickem">click me</div>
    </body>
</html>

Defer, 如果存在，则指定在页面完成解析时执行脚本。

于 2013-03-01T12:03:17.577 回答
0

什么都没有发生

因为在 DOM 元素准备好之前调用了 click 事件。因此它将无法找到带有 id 的元素clickem。在准备好的函数中调用你的脚本

$(function(){
   $("#clickem").click(function() {
     alert("I was clicked.");
   });
});

这将在 DOM 准备好后调用您的脚本，以便单击事件现在能够找到该元素并因此向它发出警报..

总是建议您在准备好的函数中编写脚本...

于 2013-03-01T11:59:32.200 回答
0

您需要对准备好的文档设置操作

$(document).ready(function(){
 $("#clickem").click(function() {
    alert("I was clicked.");
 });
})
于 2013-03-01T11:59:49.320 回答
0

这很可能是因为您的popup.js文件在 DOM 完成加载元素之前正在运行。

因此，选择器的单击事件处理程序#clickem不会找到任何项目。

通过将事件处理程序包装在$(document).ready()函数中，这将确保 DOM 已完成加载：

$(document).ready(function(){
   $("#clickem").click(function() {
       alert("I was clicked.");
   });
});

现场演示：http: //jsfiddle.net/XfFu8/

于 2013-03-01T12:00:09.040 回答