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 相关文章推荐
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
js自定义input文件上传样式
Oct 26 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python算的上脚本语言吗
2020/06/22 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
电子商务专业个人的自我评价分享
2013/10/29 职场文书
小学端午节活动方案
2014/03/13 职场文书
创建文明城市标语
2014/06/16 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android