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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
asm.js使用示例代码
Nov 28 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
JS中的phototype详解
Feb 04 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
javascript实现简易计算器功能
Sep 23 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中使用PDF文档功能
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Vue 监听元素前后变化值实例
2020/07/29 Javascript
python的常见命令注入威胁
2013/02/18 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python画双y轴图像的示例代码
2019/07/07 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
师范应届生求职信
2013/11/15 职场文书
客服服务心得体会
2013/12/30 职场文书
小小商店教学反思
2014/04/27 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
公司员工辞职信范文
2015/05/12 职场文书
学习心理学心得体会
2016/01/22 职场文书