记录一个关于 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 ...
随机推荐
- 03 Python基础
1.输出和输入 (1)print打印 Python 提供print方法来打印信息 输入: print ("hello python") 调用print方法,用户双引号(" ...
- STL pair 常见用法详解
<算法笔记>学习笔记 pair 常见用法详解 //pair是一个很实用的"小玩意",当想要将两个元素绑在一起作为一个合成元素, //又不想因此定义结构体时,使用pair ...
- IntelliJ IDEA Spring boot devtools 实现热部署
一.spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动部署新代码. 二.原理 使用了两个ClassLoader,一个ClassLoader用来加载那些不会变 ...
- vs2013nuget版本更新
记录记录. NuGet 程序包还原失败: “Newtonsoft.Json 12.0.1”程序包需要 NuGet 客户端版本“2.12”或更高版本,但当前的 NuGet 版本为“2.7.40911.2 ...
- JS基础_运算符的优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 打包JavaFX11桌面应用程序
打包JavaFX11桌面应用程序 这是JavaFX系列的第二弹,第一弹在这里 在第一弹中,我们使用的是OpenJDK8,但是OpenJDK8和Oracle Java JDK不一样,它没有内置JavaF ...
- python获取文件及文件夹大小
Python3.3下测试通过 获取文件大小 使用os.path.getsize函数,参数是文件的路径 获取文件夹大小 import os from os.path import join, getsi ...
- Presto基础知识
背景 MapReduce不能满足大数据快速实时adhoc查询计算的性能要求. Facebook的数据仓库存储在少量大型Hadoop/HDFS集群.Hive是Facebook在几年前专为Hadoop打造 ...
- HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...
- ES6入门三:解构
数组解构 对象解构 声明与解构相关的问题 解构与重复赋值 按需解构 默认值赋值 解构参数 解构(destructuring):结构化赋值 解构通常被看作ES6的一个结构化赋值方法,可以通过解构将数组元 ...