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