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 miscellanea -display data real time, using window.status
Jan 09 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
js获取url传值的方法
Dec 18 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 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
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python中去空格函数的用法
2014/08/21 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python实现红包裂变算法
2016/02/16 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
预备党员思想汇报
2014/01/08 职场文书
倡议书格式
2014/04/14 职场文书
秘书英文求职信
2014/04/16 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis