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 ready事件处理程序，一旦初始dom加载完成就会触发，这意味着页面中的所有元素都被加载到dom中，这是添加事件处理程序最安全的地方。

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

正如下面提到的@zzzzBov，它是使用冗长的文档就绪处理程序

的捷径

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

Answer 2

现在，当您的代码执行时，该按钮尚未加载，因此它不会将Click处理程序附加到任何内容，因此您需要将jQuery代码包装在$(document).ready(function() { ... });中，以便确保DOM存在要将处理程序附加到的元素，因此您的代码变为：

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

请参阅 the documentation on $(document).ready() 。

Answer 3

将您的代码放入ready事件

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

Answer 4

在声明<button>之前，你正在调用jQuery来添加点击处理程序，因此jQuery找不到它。将<button>移动到代码段的顶部，或者使用DOM ready函数来延迟脚本执行，直到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>

这个jQuery代码的新手问题无法正常工作

5 个答案: