我有一个由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执行相同操作.