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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
JavaScript实现省市区三级联动
Feb 13 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中的插件机制原理和实例
2014/07/08 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
详解Python中的Cookie模块使用
2015/07/06 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
c/c++某大公司的两道笔试题
2014/02/02 面试题
工程师岗位职责
2013/11/08 职场文书
施工材料员岗位职责
2014/02/12 职场文书
信息管理专业自荐书
2014/06/05 职场文书
五年级上册复习计划
2015/01/19 职场文书
长城导游词400字
2015/01/30 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL