jquery on()事件 append追加内容事件失效处理
先上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.csdn.net/chijiaodaxie/article/details/45395913