记录一个关于 Document.on绑定事件后,导致页面卡顿的情况
假设当前页面的js文件中有如下函数:
function A(){
function B();
} function B(){
$(document).on("click","#元素id",function(){
dosomething……;
});
}
函数A是一个按钮上绑定的onclick函数处理;
那么每次点击按钮触发A函数之后,都会导致B函数的执行,进而 $("#元素id") 这个元素就会绑定一次点击事件。
如果多次触发A函数之后,导致 $("#元素id") 上面绑定多次的点击事件,
然后再点击 $("#元素id") 的时候,就会发现该元素上面的点击事件的逻辑被执行多次,进而导致页面卡顿,表单重复提交等情况。
为避免这种情况,就需要在使用on绑定函数的时候,先使用off解绑之前的函数。如下写法:
$(document).off("click").on("click","#元素id",function(){
dosomething……;
});
这样既可避免 元素上绑定的点击事件的逻辑重复执行多次。
记录一个关于 Document.on绑定事件后,导致页面卡顿的情况的更多相关文章
- JavaScript中给onclick绑定事件后return false遇到的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 如何移除一个匿名函数的绑定事件
大家都知道 addEventListener的用法 绑定事件 例如 element.addEventListener(type,handler,false); element是dom元素 type是事 ...
- JQuery Mobile - 为什么绑定事件后会被多次执行?
JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click 不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...
- jquery 使用off移除事件 使用one绑定一次事件,on绑定事件后触发多次相同的事件的异常
<!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...
- 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- 重写navigationController的push方法后,出现卡顿现象
在使用navigation的pushViewController进行push的时候,两个页面间的动画会出现卡顿一下再推出的效果,是因为iOS7 viewController背景颜色的问题,看到大神的博 ...
- Jquery on方法绑定事件后执行多次
每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });
- python 采坑总结 调用键盘事件后导致键盘失灵的可能原因
在练习python封装键盘事件的时候,实现一个keyDown和keyUp的功能: @staticmethod def keyDown(keyName): #按下按键 ...
- Android studio关于点击事件后的页面跳转,选择完成后返回(onActivityResult)
我这个人喜欢直接上代码,在代码中说明更方便,更直接. 首先在.xml中设置一个button按钮,和一个EditText框,并分别做好id号. 这里我以籍贯测试对象. <LinearLayout ...
随机推荐
- 【Python】【demo实验17】【练习实例】【将一个正整数分解质因数】
题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 我的源代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 ...
- Kick Start 2019 Round H. Elevanagram
设共有 $N = \sum_{i=1}^{9} A_i$ 个数字.先把 $N$ 个数字任意分成两组 $A$ 和 $B$,$A$ 中有 $N_A = \floor{N/2}$ 个数字,$B$ 中有 $N ...
- java进程CPU高分析
JVM导致系统CPU高的常见场景: 内存不足,JVM gc频繁,一般会伴随OOMJVM某个线程死循环或者递归调用 定位和解决1.内存不足,gc频繁可参考我的这遍文章解决.https://blog.cs ...
- Redis迁移键
迁移键: move key db 用于在Redis内部进行数据迁移 dump key + restore key ttl value 可以实现在不同的Redis实例之间进行数据迁移 127.0.0.1 ...
- 第一次碰到%*s这个鬼东西。。
printf("%*s",5,"123"); 输出为 ##123 (其中##表示空格) 这个鬼东西是用来控制格式的. 当然也可以用来输出空格个数
- Android中如何判断内存卡是否存在
if (Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED)) { /* 得到SD卡得路 ...
- CF516D Drazil and Morning Exercise
cf luogu 首先每个点到最远点的距离可以预处理出来,这个距离显然是这个点到树直径两端点的最大值.把那个距离记为\(d_i\),然后从小到大枚举\(d_i\),并强制它为最大的\(d_i\),那么 ...
- shell脚本视频学习1
一.知识点:变量,参数传递 练习1:使用shell脚本,输出当前所在的目录 练习2:计算/etc目录下有多少个文件,用shell脚本实现 ls -l--->数一下, ls -l|wc -l ( ...
- MySQL数据库笔记二:数据类型及数据库操作
三.MySQL数据库数据类型 MySQL数据库中支持多种数据类型:数值型.字符型.日期型 常用的数据类型: 1.整型 int:整形,存储整数 int(M):M表示预期值.与存储大小和数值的范围无关. ...
- Git切换分支并提交到远程分支
1. 在本地需要提交的文件同级目录运行git bash 2. 初始化 git 运行环境 $ git init 3. 新建本地分支develop $ git checkout -b decelop 4. ...