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

目录
相关文章
|
18天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
57 21
|
19天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
48 16
|
14天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
40 9
|
17天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
19天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
18天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
15天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
24 2
|
15天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
19天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件