Ajax局部更新导致JS事件重复触发问题的解决方法
作者:bea
如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理。 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... ----------
如果在页面中包含一个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列表更新的结果处理中,不能包含工具栏事件侦听的重新初始化。
有用 | 无用
以带有公共工具栏的列表界面为例:
| 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基础教程之alert弹出提示框实例
- 编程语言JavaScript简介
- js父页面与子页面不同时显示的方法
- Javascript Memoizer浅析
- 让JavaScript和其它资源并发下载的方法
- JavaScript实现继承的4种方法总结
- JavaScript实现网页截图功能
- JavaScript跨域方法汇总
- js阻止事件追加的具体实现
- 用原生js做个简单的滑动效果的回到顶部
- 原生的html元素选择器类似jquery选择器
- 用原生JS获取CLASS对象(很简单实用)
- 通过JS动态创建一个html DOM元素并显示
- javascript模拟实现ajax加载框实例
- jquery幻灯片插件bxslider样式改进实例
- 微信分享的标题、缩略图、连接及描述设置方法
- js实现select组件的选择输入过滤代码
- javascript记录文本框内文字个数检测文字个数变化
- 返回顶部按钮响应滚动且动态显示与隐藏