javascript - 此 jQuery 代码的新手问题不起作用

Question

我真的是 jQuery 的新手，我希望这段代码在按下按钮时显示一个警告框。

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("button").click(function() {
    alert("You clicked.");
});
</script>
<button>Button</button>

我试了一下，单击按钮时没有任何反应。

Answer 1

在 jQuery 中添加事件处理程序时，您需要确保元素已经加载到 dom 中，否则 jQuery 选择器将不会返回元素，因此事件处理程序不会被注册。

解决方案是使用 dom 就绪事件处理程序，一旦初始 dom 加载完成就会触发，这意味着页面中的所有元素都加载到 dom 中，这是添加事件处理程序最安全的地方。

jQuery(function($){
    $("button").click(function() {
        alert("You clicked.");
    });
})

正如下面的@zzzzBov 所述，这是使用冗长的文档就绪处理程序的捷径

jQuery(document).ready(function($){
    $("button").click(function() {
        alert("You clicked.");
    });
})

Answer 2

现在，当您的代码执行时，该按钮尚未加载，因此它不会将点击处理程序附加到任何内容，因此您需要将您的 jQuery 代码包装起来，$(document).ready(function() { ... });以便确定有一个 DOM 元素可以附加您的处理程序，所以你的代码变成：

$(document).ready(function() {
    $("button").click(function() {
        alert("You clicked.");
    });
});

请参阅$(document).ready() 上的文档。

Answer 3

将您的代码放入ready事件中

$(document).ready(function(){
    $("button").click(function() {
        alert("You clicked.");
    });
});

Answer 4

您在<button>声明之前调用 jQuery 来添加点击处理程序，因此 jQuery 找不到它。将 移动<button>到代码段的顶部，或者使用 DOM 就绪函数来延迟脚本执行，直到 DOM 准备好被操作。

像这样：

$(document).ready(function() {
  $("button").click(function() {
    alert("You clicked.");
  });
});

Answer 5

您在按钮存在之前运行该脚本，请将其放在后面：

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<button>Button</button>
<script>
$("button").click(function() {
    alert("You clicked.");
});
</script>