jquery 新建的元素事件绑定问题解决方案


Posted in Javascript onJune 12, 2014

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种解决方案:

0号解决方案——onclick法

如果不顾结构与行为分离的准则的话,通常,我会这么做。
注意,此时的deltr这个function必须是全局函数,得放jQuery(function($) {})外面,放里边就成局部函数了,html里的onclick就调用不到了!

<td><buttononclick="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><buttonclass="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><buttonclass="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>') 
}); 
});

3号解决方案——复制事件法

上面几种方案可以说即便你没有用到jQuery库,你也能相对比较容易的实现。但这种方案相对依赖jQuery的程度更高。而且必须要求jQuery 1.2版以上。低版本jQuery需要插件。
上面两个方案都是对删除函数动了很多脑筋,换了多种触发、绑定的方式。这个方案不同,可以与平时纯静态的元素一样在domready的时候绑定。但在我们添加新行的时候我们改动一下,不再想上面那样拼接字符串来添加新行了。这回我们尝试使用复制DOM元素的方式。并且复制的时候连同绑定的事件一起复制,复制完之后再用find之类的修改内部的元素。
同时,就像这个例子,如果你会把所有元素都删除光,那template这个模板是必须的,如果不会删光,那就未必需要用template了。为了防止被误删,此处我把template设了隐藏。
我使用了jQuery中特有的clone(true)

.template{display:none;} <trclass="template"> 
<td>这里是模板</td> 
<td><button class="del">删除</button></td> 
</tr> 
<tr> 
<td>这行原来就有</td> 
<td><button class="del">删除</button></td> 
</tr> 
<tr> 
<td>这行原来就有</td> 
<td><button class="del">删除</button></td> 
</tr> 
jQuery(function($){ 
//第五个表格的删除按钮事件绑定 
$("#table5 .del").click(function() { 
$(this).parents("tr").remove(); 
}); 
//第五个表格的添加按钮事件绑定 
$("#add5").click(function(){ 
$("#table5>tbody>tr:eq(0)") 
//连同事件一起复制 
.clone(true) 
//去除模板标记 
.removeClass("template") 
//修改内部元素 
.find("td:eq(0)") 
.text("新增行") 
.end() 
//插入表格 
.appendTo($("#table5>tbody")) 
}); 
});

总评:

上面4种方案,各有优劣。
0号方案,结构与行为完全没有分离,而且污染全局命名空间。最不推荐。所以我都不把它当作一个方案来看。但对于js初学者,可以用来项目救急。
1号方案,中规中矩,没啥好也没啥不好
2号方案,这种方法充分的发挥了js事件冒泡的优势。而且效率最高。但同时由于这种方案无视了jQuery强大的选择器,所以如果涉及的元素属性要求过多就会比较麻烦了。你会徘徊在众多if的条件的是非关系之中。后来我想起来,可以用jQuery中的$(event.target).is(selector)来作为条件。这样可以极大提升开发效率,但略微降低执行效率。
3号方案,这是我认为最能体现结构与行为分离的思想的一种方案。但缺点也很明显,对于jQuery依赖性过于高了,要不就自己写一个复制连同事件一起复制的函数,但这也显然对于初学者来说异常困难。但从未来的趋势的角度来看,还是很推荐使用这种方案的。

具体选用哪一个方案,没有定数。具体看你的项目以及你js还有结构与行为分离的思想的掌握程度。最适合的才是最好的。

附加:

把3号方案改造成完美的结构行为分离的样式。
首先,带有template的是模板元素。他是一切复制的源泉,为了防止被误删,所以设为不可见。如果不会删除光,那么这个模板元素也是可选的。因为你可以复制任何一个已经存在的用于循环元素。
其次,给每个重复的元素加上一个repeat,方便用于删除按钮找到这一级元素。这个是可选的,有时候并不需要。
最后是给每一个要修改的元素加上一个类,便于用find找到。比如我这里就家了content类,新增加的可以修改里边的值。
这样一个完美的结构与行为分离的案例就完成了。

<tableid="table6"> 
<tbody id="tbody6"> 
<tr class="template repeat"> 
<td class="content">这里是模板</td> 
<td><button class="del">删除</button></td> 
</tr> 
<tr class="repeat"> 
<td class="content">这行原来就有</td> 
<td><button class="del">删除</button></td> 
</tr> 
<tr class="repeat"> 
<td class="content">这行原来就有</td> 
<td><button class="del">删除</button></td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td> </td> 
<td><button id="add6">添加</button></td> 
</tr> 
</tfoot> 
</table> jQuery(function($){ 
//第六个表格的删除按钮事件绑定 
$("#tbody6 .del").click(function() { 
$(this).parents(".repeat").remove(); 
}); 
//第六个表格的添加按钮事件绑定 
$("#add6").click(function(){ 
$("#tbody6>.template") 
//连同事件一起复制 
.clone(true) 
//去除模板标记 
.removeClass("template") 
//修改内部元素 
.find(".content") 
.text("新增行") 
.end() 
//插入表格 
.appendTo($("#tbody6")) 
}); 
});

同样,这段js也适用于如下的html结构
<ulid="tbody6"> 
<li class="template repeat"> 
<span class="content">这里是模板</span> 
<span><button class="del">删除</button></span> 
</li> 
<li class="repeat"> 
<span class="content">这行原来就有</span> 
<span><button class="del">删除</button></span> 
</li> 
<li class="repeat"> 
<span class="content">这行原来就有</span> 
<span><button class="del">删除</button></span> 
</li> 
</ul> <script type="text/javascript"></script>
Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
js文字横向滚动特效
Nov 11 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 #Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 #Javascript
js获取当前页面的url网址信息
Jun 12 #Javascript
jquery 3D 标签云示例代码
Jun 12 #Javascript
javascript面向对象特性代码实例
Jun 12 #Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 #Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 #Javascript
You might like
数据库的日期格式转换
2006/10/09 PHP
隐性调用php程序的方法
2015/06/13 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python性能优化的20条建议
2014/10/25 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python bisect模块原理及常见实例
2020/06/17 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
乡镇消防工作实施方案
2014/03/27 职场文书
志愿者活动总结范文
2014/04/26 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技