您的位置:首页 > Web前端 > JQuery

jquery 新建的元素事件绑定问题

2016-09-13 16:12 441 查看
js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。

<table>
<tbody>
<tr>
<td>这行原来就有</td>
<td><buttonclass="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><buttonclass="del">删除</button></td>
</tr>
</tbody>
</table>

通常,我会这么绑定
jQuery(function($){
//已有删除按钮初始化绑定删除事件
$(".del").click(function() {
$(this).parents("tr").remove();
});
});

对于在domready之前就存在的删除按钮,一切都很完美。但如果在domready之后用js动态添加几行,那新增的几行中的这些按钮都将失去任何作用。

如何解决这个问题?以下提供4种解决方案:

---》4种解决方案

第5种解决方案(最简):

上面的链接应该是jquery早期版本下的解决问题。自从1.7版本后,内置on方法就足以解决新元素事件绑定问题啦!

---》看手册jquery On方法

注意一点:1.在父元素上声明on方法,然后指定childrenSelector
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: