Jquery动态按钮:如何按类绑定到exisitng click事件

前端之家收集整理的这篇文章主要介绍了Jquery动态按钮:如何按类绑定到exisitng click事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个由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>

解决方法

这里的标准答案是事件授权.挂钩单击所有这些按钮的父级,并要求jQuery仅在点击的实际元素与选择器匹配时通知您,如下所示使用 delegate
$("#mainTable").delegate(".testBtn","click",function(e) {
    // ...
});

…或者在jQuery 1.7中使用超重载的on

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

注意参数顺序的差异.我更喜欢代表的明确性.

Live Example | Source

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

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

猜你在找的jQuery相关文章