页面上有多个按钮 - 不起作用答案

【问题标题】：Multiple buttns on a page - not working页面上有多个按钮 - 不起作用
【发布时间】：2009-10-20 18:36:45
【问题描述】：

有人能告诉我为什么以下方法不起作用吗？

<head>
<script language="javascript" src="/assets/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$("button").bind("click", function() {
    alert("You clicked " + $(this).attr("id"));
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<button id="button1">Click Me!</button>&nbsp;<button id="button2">Click Me!</button>&nbsp;<button id="button3">Click Me!</button>&nbsp;<button id="button4">Click Me!</button>&nbsp;<button id="button5">Click Me!</button>
</body>

当我点击任何按钮时什么都没有发生。

戴夫

【问题讨论】：

标签： javascript jquery data-binding

【解决方案1】：

试试：

 $(document).ready(function() {
    $("button").bind("click", function() {
       alert("You clicked " + $(this).attr("id"));
    });
 });

编辑：正如Alex Sexton 所述，当您必须将相同的函数应用于两个以上相同类型的元素时，使用live 而不是bind 也是更可取的。
点击链接了解更多信息，感谢他。

【讨论】：

是的，这是问题的核心。文档尚未准备好。另一种解决方案是简单地将 javascript 块放在页面底部而不是顶部。

【解决方案2】：

您需要在 DOM 准备好时绑定点击处理程序：

$(function() {
    $("button").bind("click", function() {
        alert("You clicked " + $(this).attr("id"));
    });
});

【讨论】：

这与问题无关。
只是我还是这个答案与亚历克斯的相同？唯一的区别是 $(document).ready(function(){ 和 $(function(){ 但他们都做完全相同的事情。
是的，两者完全一样。
在我发表评论时，代码块不同。现在这是正确的（在编辑之后），它使用了快捷文档准备功能。

【解决方案3】：

另一种解决方案是使用事件委托，因此按钮不存在并不重要。

$("button").live("click", function() {
    alert("You clicked " + $(this).attr("id"));
});

【讨论】：

这有一个额外的好处，即在有多个按钮的情况下表现更好（根据paulirish.com/perf，具有相同处理程序的任何超过 3 个元素将使用 $.live 提高速度）。跨度>

【解决方案4】：

因为您的 javasript 代码是在加载 html 正文之前执行的。您应该在 html 完全加载后调用您的 JS。你可以这样做：

$(function() { // 加载文档时调用 $("按钮").bind("点击", function() { alert("你点击了" + $(this).attr("id")); }); });

但最好不要将代码注入全局范围。你可以这样做：

【讨论】：

你的第一个代码块没有向全局范围注入任何东西，所以你的第二个代码块是多余的
您在这种情况下是对的，但是对于需要全局变量等更复杂的情况，最好创建自己的范围并在其中编写代码。我认为即使在这种情况下也使用这种方法更好。
我不得不不同意你 giolekva 的观点。在用另一个函数包装函数之前，在函数内部泄漏的唯一方法是声明一个全局变量。将它包装在一个函数中对您没有帮助，无论您执行多少次。
我不是 JS 极客，也许你是对的，但我是从 jQuery 的作者 John Resig 的一次演讲中了解到的。