如果在domready之后用js动态添加几行,那新增的几行中的这些按钮都将失去任何作用,下面与大家分享四种解决方法

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>

最新资讯
美司法部控告六人涉嫌贿赂亚马逊员工以获得市场优势

美司法部控告六人涉嫌

据报道,美国司法部周五指控六人参与贿赂亚马逊员工和承
最新发现的一次大灭绝事件

最新发现的一次大灭绝

2.33亿年前,地球成为“炼狱”。在我们现在所知的加拿大
拯救替罪羊,科学能帮到我们什么?

拯救替罪羊,科学能帮到

被错误指控的人,即使最终能洗脱罪名,通常也需要多年的等
恒大汽车要登陆科创板:汽车尚未卖一辆 已聚集了许家印马云马化腾

恒大汽车要登陆科创板

恒大汽车董事会宣布决议,拟发行人民币股份于上交所科创
才貌双全的清华女神教授,2020年又拿奖,却说只想“任性”地活

才貌双全的清华女神教

距颜宁2017年辞去清华大学教授,已经过去了三年。看起来
爱立信同意11亿美元收购美5G方案商Cradlepoint

爱立信同意11亿美元收

瑞典电信设备制造商爱立信表示,它已同意以11亿美元的价
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,