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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
Javascript的&&和||的另类用法
Jul 23 Javascript
js字符串操作方法实例分析
May 06 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
原生JS轮播图插件
Feb 09 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PHP图片加水印实现方法
2016/05/06 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript静态的url如何传递
2007/05/03 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
清除输入框内的空格
2016/12/21 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
如何使用Pytorch搭建模型
2020/10/26 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
Java的基础面试题附答案
2016/01/10 面试题
商场促销活动总结
2014/07/10 职场文书
力学专业求职信
2014/07/23 职场文书
小学德育工作总结2015
2015/05/12 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Nginx 匹配方式
2022/05/15 Servers
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS