记录一个关于 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 ...
随机推荐
- TP5实现自定义抛出异常消息(关闭debug)
重写Handle的render方法,实现自定义异常消息----------------------------------------------------------------------- 首 ...
- HTML accessKey约定俗成的标准
accessKey属性提供了键盘快捷键 例: <a href="index.html" accessKey="1">Home</a> 这 ...
- 从入门到自闭之Python--MySQL数据库的多表查询
多表查询 连表: 内连接:所有不在条件匹配内的数据们都会被剔除连表 select * from 表名1,表名2 where 条件; select * from 表名1 inner join 表名2 o ...
- 超链接hover切换效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta na ...
- JS基础_质数练习的改进,提高程序执行效率
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- wpf 模板绑定父对象
有两种方式可以实现在模板中元素绑定到父对象 1.<ContentPresenter Margin=”{TemplateBinding Padding}”/> 2.Color=”{Bindi ...
- 爬虫中什么是requests
print(response.text) #响应的信息 print(response.headers) #获取响应头 print(response.status_code) #响应状态码 print( ...
- LeetCode:620.有趣的电影
题目链接:https://leetcode-cn.com/problems/not-boring-movies/ 题目 某城市开了一家新的电影院,吸引了很多人过来看电影.该电影院特别注意用户体验,专门 ...
- vue移动端立项
步骤一:使用vue-cli模板创建新项目:vue init webpack ‘vue-test’ 点击查看 步骤二:引入SCSS npm install sass-loader -D npm ins ...
- Linux监控服务并主动重启
Linux查询后台进程,如果没有进程号,则重启服务: #!/bin/sh basepath=$(cd ``; pwd) while true do procnum=`ps -ef|grep " ...