jQuery动态按钮:如何按类绑定到exisitng click事件 [英] Jquery dynamic button : how to bind to exisitng click event by class
问题描述
我有一个单击事件，它由jquery ready范围内的类选择器触发:
I have a click event triggered by the class selector inside the jquery ready scope:
$(".testBtn").click(function()
{
alert("This Works");
});
这对于静态按钮很好用，但是对于单击带有"addRowBtn" id的按钮添加的动态按钮却不起作用.我猜测这与在事件注册后创建按钮有关，但是新按钮仍具有"testBtn"类，因此它应该可以工作. 知道我在做什么错以及如何使动态按钮注册到类选择器click事件吗?
This works fine for static buttons how ever this doesn't work for dynamic buttons which are added upon clicking the button with "addRowBtn" id. I'm guessing that it has something to do with that the button is created after the event is registered but still the new button has the 'testBtn' class so it makes sense it should work. Any idea what am i doing wrong and how to make the dynamic buttons registered to the class selector click event?
这是完整的代码，您可以复制并粘贴到html中，单击添加按钮"，然后尝试单击添加的按钮.您什么也不会发生.
Here is the whole code, you can copy and paste into an html, click the 'add button' and try to click the added buttons. you'll see nothing happens.
<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>
推荐答案
此处的标准答案是事件委托.将click钩在所有这些按钮的父按钮上，并让jQuery仅在实际单击的元素与选择器匹配时才通知您，例如使用 delegate :
The standard answer here is event delegation. Hook click on the parent of all of these buttons, and ask jQuery to notify you only when the actual element clicked matches the selector, like this using delegate:
$("#mainTable").delegate(".testBtn", "click", function(e) {
// ...
});
...或在jQuery 1.7+中使用超重载的 on :
...or like this in jQuery 1.7+ using the hyper-overloaded on:
$("#mainTable").on("click", ".testBtn", function(e) {
// ...
});
请注意参数顺序的差异.我更喜欢delegate的明确性.
Note the difference in the order of arguments. I prefer delegate for the explicitness of it.
Live Example | Source
无论哪种情况，jQuery都会将click钩在#mainTable上，但是当发生单击时，仅当与.testBtn匹配的元素位于被单击的元素与#mainTable之间的谱系中时，才调用处理程序. .它将像挂接到.testBtn元素一样调用处理程序.
In either case, jQuery will hook click on #mainTable, but when the click occurs, only call your handler if an element matching .testBtn is in the lineage between the element that was clicked and the #mainTable. It will call the handler as though it had been hooked to the .testBtn element.
请注意，您可以根据需要对.addRowBtn做同样的事情.
Note that you can do the same for your .addRowBtn if you like.
这篇关于jQuery动态按钮:如何按类绑定到exisitng click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
