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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
asp 的 分词实现代码
May 24 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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数据的三种方法
2008/06/05 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
学习PHP session的传递方式
2016/06/15 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python线程池如何使用
2020/05/28 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
应届生英语教师求职信
2013/11/05 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
新闻报道策划方案
2014/06/11 职场文书
民政局未婚证明
2015/06/15 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript