Ajax局部更新导致JS事件重复触发问题的解决方法


Posted in Javascript onOctober 14, 2014

如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理。

以带有公共工具栏的列表界面为例:

| Menu1 | Menu2

----------------------------------------------------------------------------

ID TITLE DESCRIPTION OPERATION

1 test1 hey test X - ...

2 test2 why not X - ...

----------------------------------------------------------------------------

$.ajax( 
.... 
data: { ... 
}, 
success: function(data) { 
$('Menu1').click( 
function(){ 
//do something 
} 
); 
} 
)

由于Menu1界面部分是公共的,并不会随着列表数据的更新而被重新载入,那么上面的代码将产生重复的click事件触发(在多次更新列表后)。

所以我们要注意,在ajax列表更新的结果处理中,不能包含工具栏事件侦听的重新初始化。

Javascript 相关文章推荐
javascript闭包入门示例
Apr 30 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JavaScript中常见内置函数用法示例
May 14 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 #Javascript
js解决select下拉选不中问题
Oct 14 #Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 #Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 #Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 #Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 #Javascript
js网页右下角提示框实例
Oct 14 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP 变量的定义方法
2010/01/26 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP 断点续传实例详解
2017/11/11 PHP
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
js转换对象为xml
2017/02/17 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python引用DLL文件的方法
2015/05/11 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
在python shell中运行python文件的实现
2019/12/21 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
户外婚礼策划方案
2014/02/08 职场文书
小学生秋游活动方案
2014/02/23 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
就职演讲稿范文
2014/05/19 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
公司聚餐通知
2015/04/22 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL