记录一个关于 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 ...
随机推荐
- [转帖]快速部署Telegraf & Influxdb
快速部署Telegraf & Influxdb https://www.cnblogs.com/deykenlee/p/7565647.html 作者的blog 比较早 后来 influxdb ...
- [转帖]CentOS7安装xrdp(windows远程桌面连接linux)
CentOS7安装xrdp(windows远程桌面连接linux) https://blog.csdn.net/sgrrmswtvt/article/details/81869208 You Konw ...
- dev控件学习笔记之----CxGrid2
一.cxgrid 表格自适应列宽和增加注脚注和 for i := 0 to ado_lxr_cx.FieldCount - 1 do begin //如果是数字,则注脚求合 ...
- 前缀和&二维前缀和
我们知道,数组上的前缀和S[i]=S[i-1]+a[i] 那么,怎样求二维前缀和呢? 二维前缀和: 绿色点的前缀和就是黄色.红色.灰色和绿色的点权和 怎样计算? s[i][j]=s[i-1][j]+s ...
- springboot2.0application.在yml文件中添加自定义配置
1. 在application.yml文件中添加自定义配置 app: platform: version: code: '1.0.0' 2. 定义bean类 具体格式: 其中的成员变量名称需要与配 ...
- Asp.net core Identity + identity server + angular + odata + 权限管理
今天踩了一个坑. 网站发布后看到了一个 error Refused to execute inline script because it violates the following Content ...
- Eclipse连接数据库报错Local variable passwd defined in an enclosing scope must be final or effectively final
其实原因很简单,就是翻译的结果 匿名内部类和局部内部类只能引用外部的fianl变量 把变量变成fianl就行了 第一次知道啊 记小本本.......
- html常用代码大全
1.结构性定义 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文 ...
- css 字体库和动画
@font-face { font-family:'WebSymbols'; src: url('../font/WebSymbols-Regular.otf'); } .icon{ font-fam ...
- Oracle数据库中的变量
Oracle数据库中的变量 来源:https://blog.csdn.net/wahaa591/article/details/46772769 1.define(即host变量) define va ...