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追加的内容的删除功能无效。


jquery on()事件 append追加内容事件失效处理

处理这个问题有很多方法,可以把事件写到button里面,不过这里讨论使用jquery的on()事件来处理:

$("table").on("click","button",function(){
$(this).parent().parent().remove();
})

如上来绑定点击事件,则追加内容的删除功能也有效


jQuery api

jquery on()事件 append追加内容事件失效处理


参考文章:http://blog.csdn.net/chijiaodaxie/article/details/45395913