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

简介: 背景:系统需要动态增加分类,各分类下有各自的3项资金(有资金小计,问题就出在这里)。问题:新增一条分类,需要给3项资金新绑定小计功能。这个时候会发现,初始第一行的计算,会调用两次,增加到三行的时候,第一行会重复计算三次,第二行会重复计算两次...以此类推为什么会执行多次?猜词:新增一行,绑定计算函数,历史分类会累计事件。

背景:

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


问题:

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


为什么会执行多次?


猜词:

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


方案:

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


编码:

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



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


----by.沫沫金

wKioL1l257_A_jS1AAA_OvQu9gg810.jpg

目录
相关文章
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
62 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
63 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
47 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
42 4
jQuery Cookie 插件
|
20天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
34 0