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 限制输入脚本大全
Nov 03 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 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
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python简单实例训练(21~30)
2017/11/15 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
公司端午节活动方案
2014/02/04 职场文书
《我的信念》教学反思
2014/02/15 职场文书
2014年法务工作总结
2014/12/11 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书