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 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
浅谈react前后端同构渲染
Sep 20 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python中dict()的高级用法实现
2019/11/13 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
客服专员岗位职责范本
2015/04/07 职场文书
停水通知
2015/04/16 职场文书
环境卫生整治简报
2015/07/20 职场文书
运动会报道稿大全
2015/07/23 职场文书
学前班教学反思
2016/02/24 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
mysql 子查询的使用
2022/04/28 MySQL