您的位置：首页 > 移动开发

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

2017-07-04 16:12 162 查看

先上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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航