记录一个关于 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 ...
随机推荐
- [官网]mono的官方安装方法
mono 官方的安装方法 https://www.mono-project.com/download/stable/#download-lin-centos Download Release chan ...
- python元组数据类型讲解
元组可以被看成是不能改变的列表.列表是动态的,你可以增添,插入,删除,更改列表元素.有时我们需要这样的操作,但是有些时候我们需要保证有些数据是不能被用户或程序更改的.这就是元组的作用. 准确的说,列表 ...
- php socket 编程读写函数
fwrite() 二进制安全 end条件[string写完/length-1]; fputs() fwrite()的别名; fread() 二进制安全,end条件[一个可用包/EOF/length-1 ...
- Centos yum 安装 rabbitmq-server
安装rabbitmq-server yum install -y rabbitmq-server 开启后台管理 rabbitmq-plugins enable rabbitmq_managemen ...
- VPS磁盘划分建立新磁盘
今天我们来教下大家拿到VPS后,如何划分电脑内的磁盘空间.很多朋友可能遇到拿到VPS,为什么会打开电脑后在电脑盘那看到就一个C盘.还有些用户以为怎么只有那小的磁盘空间啊!怎么和卖的不一样啊!其实了我们 ...
- 【原创】大叔经验分享(64)cloudera manager agent启动组件进程过程
概述 The Agent is started by init.d at start-up. It, in turn, contacts the Cloudera Manager Server and ...
- git的详细安装
git的详细安装 Git 是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允 ...
- Yali7月集训Contest2 T1 Cube 题解
题目链接: 连我们都只有纸质题目...话说雅礼集训都是这样的吗... 大意 0维基本图形是一个点 1维基本图形是一条线段 2维基本图形是一个正方形 3维基本图形是一个正方体 4维基本图形是... 求\ ...
- 15条SQLite3语句
15条SQLite3语句 转自:http://www.thegeekstuff.com/2012/09/sqlite-command-examples/ SQLite3 is very light ...
- c语言测试芯片好坏
问题描述有n个(2<n<20)芯片,好的或坏的,并且有比坏的芯片更多的已知的好的芯片.每个芯片都可以用来测试其他芯片.当用一个好的芯片测试其他芯片时,它可以正确地给出被测芯片是好是坏.当用 ...