当jquery添加新元素后的绑定事件的处理
空间管理 您的位置: ITPUB个人空间 ? Java交流学习教室 ? 日志
汇聚你我之力......
jquery 新建的元素事件绑定问题(上)
上一篇 / 下一篇 2008-10-20 21:40:00 / 个人分类： jQuery
查看( 1565 ) / 评论( 8 ) / 评分( 30 / 5 )
demo: http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html
我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是
在页面加载完成后给元素绑定了事件，但又新增加的元素上却没有绑定任何事件。
js的事件监听跟css不一样，css只要设定好了样式，不论是原来就有的还是新添加的，都有一样的表现。而事件监听不是，你必须给每一个元素单独绑定事件。
常见的例子是处理表格的时候。每行行末有个删除按钮，点了这个能够删除这一行。
< table >
< tbody >
< tr >
< td > 这行原来就有 </ td >
< td >< button class = " del " > 删除 </ button ></ td >
</ tr >
< tr >
< td > 这行原来就有 </ td >
< td >< button class = " del " > 删除 </ button ></ td >
</ tr >
</ tbody >
</ table >
通常，我会这么绑定
jQuery ( function ( $ ) { //已有删除按钮初始化绑定删除事件 $ ( " .del " ) . click ( function () { $ ( this ) . parents ( " tr " ) . remove () ; }) ; }) ;
对于在domready之前就存在的删除按钮，一切都很完美。但如果在domready之后用js动态添加几行，那新增的几行中的这些按钮都将失去任何作用。
如何解决这个问题？以下提供4种解决方案：
=============================
0号解决方案——onclick法
如果不顾结构与行为分离的准则的话，通常，我会这么做。
注意 ，此时的deltr这个function必须是全局函数，得放jQuery(function($) {})外面，放里边就成局部函数了，html里的onclick就调用不到了！
< td >< button onclick = " deltr(this) " > 删除 </ button ></ td >
jQuery ( function ( $ ) { //添加行 $ ( " #add2 " ) . click ( function (){ $ ( " #table2>tbody " ) . append ( ' <tr><td>新增行</td><td><button nclick="deltr(this)">删除</button></td></tr> ' ) }) ; }) ; //删除行的函数，必须要放domready函数外面 function deltr ( delbtn ) { $ ( delbtn ) . parents ( " tr " ) . remove () ; } ;
=============================
1号解决方案——重复绑定法
即，在domready的时候就给已有的元素绑定事件处理函数，
而后当新增加的元素的时候再次绑定。
< td >< button class = " del " > 删除 </ button ></ td >
jQuery ( function ( $ ) { //定义删除按钮事件绑定 //写里边，防止污染全局命名空间 function deltr () { $ ( this ) . parents ( " tr " ) . remove () ; } ; //已有删除按钮初始化绑定删除事件 $ ( " #table3 .del " ) . click ( deltr ) ; //添加行 $ ( " #add3 " ) . click ( function (){ $ ( ' <tr><td>新增行</td><td><button class="del">删除</button></td></tr> ' ) //在这里给删除按钮再次绑定事件。 . find ( " .del " ) . click ( deltr ) . end () . appendTo ( $ ( " #table3>tbody " )) ; }) ; }) ;
=============================
2号解决方案——事件冒泡法
利用事件冒泡的原理，我们给这个按钮的祖先元素绑定事件处理函数。
然后通过event.target这个对象来判断，这个事件是不是我们要找的对象触发的。
通常可以利用一些DOM属性，比如event.target.className、event.target.tagName等之类的来判断。
< td >< button class = " del " > 删除 </ button ></ td >
jQuery ( function ( $ ) { //第四个表格的删除按钮事件绑定 $ ( " #table4 " ) . click ( function ( e ) { if ( e . target . className == " del " ) { $ ( e . target ) . parents ( " tr " ) . remove () ; } ; }) ; //第四个表格的添加按钮事件绑定 $ ( " #add4 " ) . click ( function (){ $ ( " #table4>tbody " ) . append ( ' <tr><td>新增行</td><td><button class="del">删除</button></td></tr> ' ) }) ; }) ;
相关阅读: jquery+ajax+xml+php简单留言板 ( Java006 , 2008-10-20) jquery五行代码实现对浏览器版本检测 ( Java006 , 2008-10-20) jquery ajax读取xml文档 ( Java006 , 2008-10-20) Jquery+ExtJS实现文件上传 ( Java006 , 2008-10-20) jquery 新建的元素事件绑定问题(下) ( Java006 , 2008-10-20)
导入论坛 引用链接 收藏 分享给好友 推荐到圈子 管理 举报
TAG: javascript jquery
引用 删除 Guest / 2010-04-03 15:14:09 评 5 分
引用 删除 Guest / 2010-01-21 14:31:21 评 -5 分
引用 删除 Guest / 2010-01-13 16:58:07 评 5 分
引用 删除 Guest / 2009-10-20 09:58:48 评 5 分
引用 删除 Guest / 2009-07-21 12:13:49 评 5 分
引用 删除 Austin / 2009-07-01 19:27:30 $(document).ready(function(){
function bind(){
$("xxx").bind("click",function(){//////});
}
function unbind(){
$("xxx").unbind("click");
}
bind();
}
这样绑定事件，HTML结构变化后执行
unbind();
bind();
就可以了。先取消绑定，再绑定一次，实现rebind 引用 删除 Guest / 2009-06-23 10:03:00 评 5 分
引用 删除 Guest / 2009-05-15 11:33:51 评 5 分
查看全部评论
-5 -3 -1 - +1 +3 +5
评分： 0
我来说两句显示全部
内容
昵称
验证
Java006
用户菜单 给我留言 加入好友 发短消息 我的介绍 论坛资料 空间管理
我的栏目 Rails Java EJB Hibernate JSP 资讯 J2ME Eclipse GlassFish Struts J2SE JavaScript NetBeans J2EE jQuery Spring 74755 JBoss JSF Ruby Flex Swing
标题搜索
日历 ? 2010-11-24 日 一 二 三 四 五 六 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
我的存档 2009年01月 2008年12月 2008年11月 2008年10月 2008年09月 2008年08月 2008年07月 查看所有存档
数据统计 访问量: 76699 日志数: 392 文件数: 1 书签数: 1 建立时间: 2008-07-07 更新时间: 2009-01-15
RSS订阅
Powered by X-Space 3.0.2 ? 2001-2007 Comsenz Inc.
京ICP证:010037号 网站统计
Open Toolbar
查看更多关于当jquery添加新元素后的绑定事件的处理的详细内容...