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调试工具(下载)
Jan 09 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
JavaScript中的私有成员
2006/09/18 Javascript
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
车间组长岗位职责
2013/12/20 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
教师节感想
2015/08/11 职场文书
图解上海144收音机
2021/04/22 无线电
Spring整合Mybatis的全过程
2021/06/28 Java/Android
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js