假设当前页面的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. 洛谷P1088 火星人

    //其实就是全排列 //我们从外星人给的那串数字往下搜索 //一直往下拓展m次 //最后输出结果 //虽然看起来很暴力,但是题目上说了m非常小 #include<bits/stdc++.h> ...

  2. Ruby Rails学习中:登陆

    登陆 一. Sessions 控制器 登录和退出功能由 Sessions 控制器中相应的 REST 动作处理 : 登录表单在 new 动作中处理, 登录的过程是向 create 动作发送 POST 请 ...

  3. Rust 优劣势: v.s. C++ / v.s. Go(持续更新)

    Rust 发展速度比 C++ 强很多.如果去翻 open-std 的故纸堆,会发现 C++ 这边有很多人(包括标准委员会的人)提了有用的提案,但后来大多不了了之或经历了非常长的时间才进入标准. > ...

  4. jvm调试相关:jmap失效下找到alternatives神器

    1.使用 jmap <pid>出现的错误日志:很明显是版本问题 Error attaching to process: sun.jvm.hotspot.runtime.VMVersionM ...

  5. 进阶Java编程(13)反射与Annotation

    1,反射取得Annotation信息 从JDK1.5之后Java提供了Annotation技术支持,这种技术为项目的编写带来了新的模型,而后经过了十年的发展,Annotation的技术得到了非常广泛的 ...

  6. 进阶Java编程(4)多线程深入话题

    多线程深入话题 1,优雅的停止线程 在多线程操作之中如果要启动多线程使用的肯定是Thread类中的start()方法,而如果对于多线程需要进行停止处理,Thread类原本提供有stop()方法,但是这 ...

  7. vue和react区别

    vue和react区别  

  8. [转载]aspnet webapi 跨域请求 405错误

    写了个webapi给同事用ajax调用,配置完跨域以后get请求完全没问题,post就一直报405错误,花了半天时间就是解决不了,后来在网上看到一博主的帖子才知道原来是webapi 默认的web.co ...

  9. 动画方案 Lottie 学习(二)之实战

    代码 $('.success-info-title').append('<p class="normal_finish" id="normal_finish_ani ...

  10. luogu P4688 [Ynoi2016]掉进兔子洞

    luogu 我们要求的答案应该是三个区间长度\(-3*\)在三个区间中都出现过的数个数 先考虑数列中没有相同的数怎么做,那就是对三个区间求交,然后交集大小就是要求的那个个数.现在有相同的数,考虑给区间 ...