jquery使用on()方法绑定的事件被执行多次的问题
2024-09-01 22:56:10
jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。
本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。
简单还原一下问题的场景
这里简单还原一下问题的场景,使用一个按钮给另一个按钮通过on()方法绑定事件。
HTML的部分
<input id="bindEventBtn" type="button" value="给按钮绑定事件的按钮" />
<input id="noEmotionBtn" type="button" value="我是一个莫得感情的按钮" />
JavaScript的部分
$(function(){
$('#bindEventBtn').click(function () {
$('#noEmotionBtn').on('click', function () {
alert('我是一个莫得感情的按钮');
});
});
})
这样,当多次点击bindEventBtn按钮,就会将同一个事件多次绑定到noEmotionBtn按钮上。
而on()方法的一个特性是绑定了多少次就触发多少次的,这就是问题所在。
问题的解决方法
解决问题的方法有两个,大体就是对重复绑定的事件进行解绑。
1.使用off()方法解绑。
$('#noEmotionBtn').off('click').on('click', function () {
alert('我是一个莫得感情的按钮');
});
2.使用unbind()方法解绑。
$('#noEmotionBtn').unbind('click').on('click', function () {
alert('我是一个莫得感情的按钮');
});
总结
实际的场景可能会复杂得多,因此在使用on()方法给元素绑定事件的时候要格外注意多次重复绑定的问题。
但是解决问题的大体思路是一样的,建议是统一先使用off()方法去解绑事件,避免出错。
当然了,最好是从根源上找到问题,也就是避免多次绑定事件的事情发生。
另外的,如果要给一个元素在多个地方绑定不同的事件处理函数的话,可能就要另外想想办法了。
"当一个人用心去创造一样东西时,它便有了灵魂。"
最新文章
- docker搭建ros-indigo-arm交叉编译环境
- WCF、MongoDB
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象
- PHP开发APP接口----单例模式连接数据库
- sharepoint 开发
- 使用jenkins + python + selenium一步步搭建web自动化测试“框架”(1) - 各部件简介
- javascript 获取元素宽高
- visual studio2013负载测试简单问题记录
- String类的一些转换功能(6)
- [物理学与PDEs]第1章习题10 自由电磁场在 Lorentz 规范变换下可使标势为零
- Codeforces 101623E English Restaurant - 动态规划
- C#的static
- LightOJ - 1246 Colorful Board(DP+组合数)
- watch监控,对比新值和旧值做出相应判断
- tornado学习笔记
- Python之数据库模块安装 MySQLdb
- web程序2
- ACE中TASK架构简介及简单应用
- react native项目增加devtools工具
- oracle11g导出表时空表导不出解决方案
热门文章
- 使用python实现数组、链表、队列、栈
- 我的 FPGA 学习历程(15)—— Verilog 的 always 语句综合
- 在Atmel Studio7中创建ASF项目
- luogu1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)
- 湖南大学第十四届ACM程序设计新生杯(重现赛)G a+b+c+d=? (16进制与LL范围)
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目(一)-创建和使用默认的模板
- 网易极客战记官方攻略-地牢-Kithgard 图书管理员
- DDMS files not found: xxx\hprof-conv.exe
- .net上传文件,大文件及下载方式汇总(转)
- C# ThreadPool 线程池