假设当前页面的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. linux用户和组 之 用户管理

    一. linux 用户和组的基本介绍 1.linux下 有三种用户: 1. root: 权限最大的. 2. 系统用户: UID小于1000的.系统服务管理用户,一般是不允许登录系统的.(比如mysql ...

  2. Intellj Idea 快捷键入门

    Intellj IDEA快捷键入门 时间: 2019/11/29 系统: Win10系统 版本 :Intellj Idea 2018.3 背景: 入手Intellj idea 两个月了,总结一下一些常 ...

  3. ARST 第五周打卡

    Algorithm : 做一个 leetcode 的算法题 /////////////////////////////////////////////////////////////////// // ...

  4. PAT B1015A1062德才论(25)

    题目描述 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得 ...

  5. python 类(3) property

    class PetCat(): """ 家猫类""" def __init__(self, name, age): self.name = ...

  6. 网络名称空间 实例研究 veth处于不同网络的路由问题

    相关命令详细介绍参见 http://www.cnblogs.com/Dream-Chaser/p/7077105.html .问题: 两个网络名称空间中的两个接口veth0和veth1,如何配置net ...

  7. GTID复制

    什么是GTID呢, 简而言之,就是全局事务ID(global transaction identifier ),最初由google实现,官方MySQL在5.6才加入该功能.GTID是事务提交时创建分配 ...

  8. Codeforces 1237D. Balanced Playlist

    传送门 首先显然的,如果一个位置开始播放了两圈还没结束,那么就永远不会结束 先考虑位置 $1$ 开始播放,用一个 $multisetset$ 维护一下当前听的所有歌,直到某一首歌 $r$ 不合法了就停 ...

  9. java线程的方便调用方式

    一直用java的线程,总感觉写起来阅读或书写起来不是方便,改进之. 实现类: public class Task<R> { private ExecutorService executor ...

  10. 树莓派安装使用RXTX

    在RaspberryPi树莓派上使用RXTX(RXTX的源码安装)Linux 编译RXTX(JAVA串口开发)源码 如果为windows系统,则使用rxtx比较简单,到http://fizzed.co ...