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调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JS控制表单提交的方法
Jul 09 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Node 代理访问的实现
Sep 19 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使用百度翻译api示例分享
2014/01/31 PHP
php显示时间常用方法小结
2015/06/05 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
班组长安全职责
2014/01/05 职场文书
人事档案接收函
2014/01/12 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
法定代表人授权委托书
2014/04/04 职场文书
销售提升方案
2014/06/07 职场文书
大学生简短的自我评价
2014/09/12 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2014年市场部工作总结
2014/11/25 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang