jQuery动态行绑定事件,发生重复绑定解决方案

简介:

背景:

系统需要动态增加分类,各分类下有各自的3项资金(有资金小计,问题就出在这里)。


问题:

新增一条分类,需要给3项资金新绑定小计功能。这个时候会发现,初始第一行的计算,会调用两次,增加到三行的时候,第一行会重复计算三次,第二行会重复计算两次...以此类推


为什么会执行多次?


猜词:

新增一行,绑定计算函数,历史分类会累计事件。也就是说,每新增一行,历史的每一个分类都会增加一次事件绑定。


方案:

绑定事件前,删除事件。jQuery提供了on()、live()绑定方法,对应的解绑事件off()、die().


编码:

1
2
3
4
5
6
7
8
// 调整之后的事件绑定
$( this ).off( 'blur' ).on( 'blur' , function (){
     alert( '绑定前,解绑。保证事件唯一性' );
});
/** 老的事件绑定
$(this).on('blur',function(){
     alert('直接绑定,遇到重复调用,会出现事件多次执行的异常,请确认只绑定一次。');
});*/



以上,就是jQuery事件绑定,出现重复多次执行问题的来龙去脉,谢谢大家。


----by.沫沫金

wKioL1l257_A_jS1AAA_OvQu9gg810.jpg



本文转自 沫沫金 51CTO博客,原文链接:http://blog.51cto.com/zl0828/1950804,如需转载请自行联系原作者

相关文章
|
7月前
|
JavaScript
jQuery 动态输入文字展示效果
jQuery 动态输入文字展示效果
48 0
|
9月前
|
存储 Web App开发 JSON
JavaScript将csv转为json的解决方案(1):jQuery-csv解析csv数据
JavaScript将csv转为json的解决方案(1):jQuery-csv解析csv数据
208 0
|
25天前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
10 0
|
9月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
68 0
|
4月前
|
JavaScript
jQuery 与 Discuz!冲突的解决方案
之前提交一款插件,然后被打回来的原因是页面报错。。。这就让我慌张了,毕竟我js基础为0... 于是我百度了......
39 0
|
5月前
|
JavaScript
jQuery动态拼接多张图片并且获取每张图片名称
jQuery动态拼接多张图片并且获取每张图片名称
26 1
|
5月前
|
JavaScript
jQuery动态增加一行元素和删除一行元素
jQuery动态增加一行元素和删除一行元素
18 0
|
5月前
|
JavaScript
jQuery绑定事件
jQuery绑定事件
|
7月前
|
JavaScript 流计算 索引
jQuery 动态输入展示效果
jQuery 动态输入展示效果
49 0