Question

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

<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>

当我点击任何按钮时，什么也没发生。

戴夫

Answer 1

尝试：

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

修改：正如Alex Sexton所述，当您必须将同一函数应用于同一类型的2个以上元素时，使用live代替bind也是首选。
点击链接获取更多信息，给他信用。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

$(function() { // it's called when document loads
    $("button").bind("click", function() {
        alert("You clicked " + $(this).attr("id"));
    });
});

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

(function() { // it helps you not to inject your code into global scope
    $(function() { // it's called when document loads
        $("button").bind("click", function() {
            alert("You clicked " + $(this).attr("id"));
        });
    });
})();

页面上有多个按钮 - 无法正常工作

4 个答案: