假设当前页面的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绑定事件后,导致页面卡顿的情况的更多相关文章

  1. JavaScript中给onclick绑定事件后return false遇到的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js 如何移除一个匿名函数的绑定事件

    大家都知道 addEventListener的用法 绑定事件 例如 element.addEventListener(type,handler,false); element是dom元素 type是事 ...

  3. JQuery Mobile - 为什么绑定事件后会被多次执行?

    JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

  4. jquery 使用off移除事件 使用one绑定一次事件,on绑定事件后触发多次相同的事件的异常

    <!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...

  5. 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  6. 重写navigationController的push方法后,出现卡顿现象

    在使用navigation的pushViewController进行push的时候,两个页面间的动画会出现卡顿一下再推出的效果,是因为iOS7 viewController背景颜色的问题,看到大神的博 ...

  7. Jquery on方法绑定事件后执行多次

    每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });

  8. python 采坑总结 调用键盘事件后导致键盘失灵的可能原因

    在练习python封装键盘事件的时候,实现一个keyDown和keyUp的功能: @staticmethod    def keyDown(keyName):        #按下按键        ...

  9. Android studio关于点击事件后的页面跳转,选择完成后返回(onActivityResult)

    我这个人喜欢直接上代码,在代码中说明更方便,更直接. 首先在.xml中设置一个button按钮,和一个EditText框,并分别做好id号. 这里我以籍贯测试对象. <LinearLayout ...

随机推荐

  1. 【LOJ】#3109. 「TJOI2019」甲苯先生的线段树

    LOJ#3109. 「TJOI2019」甲苯先生的线段树 发现如果枚举路径两边的长度的话,如果根节点的值是$x$,左边走了$l$,右边走了$r$ 肯定答案会是$(2^{l + 1} + 2^{r + ...

  2. FZU2275 Game(kmp

    暑假wa的题了,,,看见vj的attempt痕迹打算挨个补了,简单kmp题,判断bob的串是不是全为0或者是alice的字串就好了 #include<algorithm> #include ...

  3. G.Colorful String(The Preliminary Contest for ICPC Asia Xuzhou 2019)

    https://nanti.jisuanke.com/t/4 #include <bits/stdc++.h> using namespace std; ,; typedef unsign ...

  4. k8s-kubectl命令大全

    Kubectl命令行管理对象 类型 命令 描述 基础命令 create 通过文件名或标准输入创建资源. expose 将一个资源公开为一个新的Kubernetes服务. run 创建并运行一个特定的镜 ...

  5. Glide优化

    几乎所有的 OOM 错误都是因为宿主应用出了问题,而不是 Glide 本身. 应用里两种常见的 OOM 错误分别是: 过大的内存分配 (Excessively large allocations) 内 ...

  6. 树莓派安装SSH

    1. 安装ssh sudo apt-get install openssh-server 2. 检查树莓派SSH服务是否开启 ps -e|grep ssh 3. SSH服务开启 sudo /etc/i ...

  7. Tomcat中的Host和Engine级别的servlet容器

    这边文章主要介绍的是Host容器 和 Engine容器.如果你想在同一个Tomcat上部署运行多个Context容器的话,你就需要使用Host容器,从理论上来讲,如果你的Tomcat只想要部署一个Co ...

  8. 大数据学习(2)- export、source(附带多个服务器一起启动服务器)

    linux环境中, A=1这种命名方式,变量作用域为当前线程 export命令出的变量作用域是当前进程及其子进程. 可以通过source 脚本,将脚本里面的变量放在当前进程中 附带自己写的tomcat ...

  9. EF入门-CRUD操作

    一.EF数据查询假设我们已经定义好了context:private AccountContext db = new AccountContext(); 1.[基本查询] 查询所有var users = ...

  10. WCF寄宿windows服务一

    如果只是寄宿单个wcf服务,方法很简单,步骤:1.创建好一个windows服务.关于windows服务内容见:http://www.cnblogs.com/zhaow/p/7866916.html2. ...