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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
PHP守护进程实例
Mar 06 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
JavaScript中import用法总结
Jan 20 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
一个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
杏林同学录(五)
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
使用Python实现一个简单的项目监控
2015/03/31 Python
python中self原理实例分析
2015/04/30 Python
让Python代码更快运行的5种方法
2015/06/21 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
2014年财务工作自我评价
2014/09/23 职场文书
早安问候语大全
2015/11/10 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python