使用jQuery删除动态生成的表行
使用jQuery删除动态生成的表行
提问于 2014-04-23 23:38:11
下面的代码在Jquery的帮助下添加和删除表行add函数运行良好，但只有在删除第一行时，remove才有效
<table>
<tr>
<td><button type="button" class="removebutton" title="Remove this row">X</button>
</td>
<td><input type="text" id="txtTitle" name="txtTitle"></td>
<td><input type="text" id="txtLink" name="txtLink"></td>
</tr>
</table>
<button id ="addbutton">Add Row</button>和脚本
var i = 1;
$("#addbutton").click(function() {
$("table tr:first").clone().find("input").each(function() {
$(this).val('').attr({
'id': function(_, id) {return id + i },
'name': function(_, name) { return name + i },
'value': ''
});
}).end().appendTo("table");
i++;
});
$('button.removebutton').on('click',function() {
alert("aa");
$(this).closest( 'tr').remove();
return false;
});谁能给我解释一下为什么我只能删除第一行？非常感谢
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-04-23 23:42:56
你需要使用事件委托，因为这些按钮在加载时是不存在的：
http://jsfiddle.net/isherwood/Z7fG7/1/
$(document).on('click', 'button.removebutton', function () { // <-- changes
alert("aa");
$(this).closest('tr').remove();
return false;
});Stack Overflow用户
发布于 2014-04-23 23:45:04
您应该使用事件委托，因为您创建的是动态行。
$(document).on('click','button.removebutton', function() {
alert("aa");
$(this).closest('tr').remove();
return false;
});Stack Overflow用户
发布于 2014-04-23 23:43:36
克隆时，默认情况下不会克隆事件。添加的行没有附加事件处理程序。如果你调用clone(true)，那么它应该也能处理它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23249130
复制相关文章
相似问题