2

我有一个由 jquery 就绪范围内的类选择器触发的单击事件：

    $(".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>
4

2 回答 2

10

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

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

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

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

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

实例| 来源

在任何一种情况下，jQuery 都会挂钩click，#mainTable但是当点击发生时，只有.testBtn在被点击的元素和#mainTable. 它将调用处理程序，就好像它已与.testBtn元素挂钩一样。

请注意，.addRowBtn如果您愿意，也可以为您做同样的事情。

于 2012-12-11T11:00:53.847 回答
0

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

于 2012-12-11T11:01:41.160 回答