Question

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.");
});

嗯...所以当我这样做的时候什么也没发生。

Answer 1

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

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

中

Answer 2

使用DOM ready事件：

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

查询DOM时，

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

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

Answer 3

什么都没发生

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

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

这将在DOM准备好之后调用您的脚本，因此click事件现在将能够找到该元素并因此提醒它..

始终建议您在准备好的函数内编写脚本...

Answer 4

您需要在文档就绪上设置操作

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

Answer 5

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

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

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

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

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

Answer 6

绑定click事件时，DOM中不存在#clickem。使用.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，如果存在，则指定在页面完成解析时执行脚本。

Click不会触发在外部jQuery文件中写入的事件

6 个答案: