本文探讨了在jQuery中，当使用append方法动态添加内容后，新添加元素的事件失效的问题。通过示例代码展示了一个HTML表格，其中包含新增和删除行的功能。发现只有原始内容的删除按钮有效，而append添加的行的删除按钮无效。解决这个问题的方法是利用jQuery的on()事件处理函数，将删除事件绑定到表格的button元素，确保对动态添加的内容也能生效。
先上HTML代码：
<body>
<button id="add">新增一行</button>
<table border='1'>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>windy</td>
<td>19</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
</table>
</body>
js代码：
<script>
$(function(){
$("#add").click(function(){
var h="<tr>"+
"<td>justin</td>"+
"<td>30</td>"+
"<td>男</td>"+
"<td><button>删除</button></td>"+
"</tr>"
$("table").append(h);
})
$("table button").click(function(){
$(this).parent().parent().remove();
})
})
</script>
点击‘新增一行’的按钮，表格则会增加一行，
但是‘删除’功能只有原本的一行有效，通过append追加的内容的删除功能无效。
处理这个问题有很多方法，可以把事件写到button里面，不过这里讨论使用jquery的on()事件来处理：
$("table").on("click","button",function(){
$(this).parent().parent().remove();
})
如上来绑定点击事件，则追加内容的删除功能也有效
jQuery api
参考文章：http://blog.youkuaiyun.com/chijiaodaxie/article/details/45395913
扫一扫
2109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
