Question

我有一个由jquery ready范围内的类选择器触发的click事件：

    $(".testBtn").click(function()
    {
        alert("This Works");      
    });

这适用于静态按钮，但这对于动态按钮不起作用，动态按钮在单击带有“addRowBtn”id的按钮时添加。我猜测它与事件被注册后创建按钮有关，但是新按钮仍然有'testBtn'类，所以它应该有效。知道我做错了什么以及如何将动态按钮注册到类选择器点击事件？

以下是整个代码，您可以复制并粘贴到html中，单击“添加按钮”并尝试单击添加的按钮。你会发现没有任何事情发生。

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script>
$(function()
{    
    $(".addRowBtn").click(function()
    {
        $("#mainTable tr:last").after("<tr><td><button class='testBtn'>NotWorking</button></td></tr>");           
    });

    $(".testBtn").click(function()
    {
        alert("This Works");      
    });
});
</script>
</head>
<body>

<table id="mainTable">
<button class="addRowBtn">Add button</button>
<tr><th>Testing</th></tr>
<tr><td><button class='testBtn'>Working</button></td></tr>
</table>
</body>

</html>

Answer 1

此处的标准答案是事件委托。在所有这些按钮的父级上挂钩click，并要求jQuery仅在点击的实际元素与选择器匹配时通知您，如使用delegate：

$("#mainTable").delegate(".testBtn", "click", function(e) {
    // ...
});

...或者在jQuery 1.7+中使用超重载on：

$("#mainTable").on("click", ".testBtn", function(e) {
    // ...
});

请注意参数顺序的不同。我更喜欢delegate来明确它。

Live Example | Source

在任何一种情况下，jQuery都会在click上挂钩#mainTable，但是当点击发生时，如果匹配.testBtn的元素位于元素之间的谱系中，则只调用您的处理程序点击了#mainTable。它将调用处理程序，就好像它已挂钩到.testBtn元素。

请注意，如果您愿意，可以对.addRowBtn执行相同操作。

Answer 2

使用jquery的委托函数将事件处理程序应用于现在和将来的所有实例 http://api.jquery.com/delegate/

Jquery动态按钮：如何按类绑定到现有的单击事件

2 个答案: