假设当前页面的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. c++学习笔记之多态和虚函数

    有了虚函数,基类指针指向基类对象时就使用基类的成员(包括成员函数和成员变量),指向派生类对象时就使用派生类的成员.换句话说,基类指针可以按照基类的方式来做事,也可以按照派生类的方式来做事,它有多种形态 ...

  2. curl put方式上传文件

    发送端 <?php function curlPut($destUrl, $sourceFileDir, $headerArr = array(), $timeout = 10) { $ch = ...

  3. MHA原理及搭建

    MYSQL5.7下搭建MHA 环境说明 在主机1,主机2,主机3上安装MySQL服务端和客户端. 主机1 主机2 主机3 操作系统 CentOS7.4 CentOS7.4 CentOS7.4 主机名 ...

  4. 解决radiobutton在gridview中无法单选的一种方法

    最近在项目中有个单选gridview中某一项的需求,使用radiobutton后发现,虽然最终选择出来的是一项,但是在页面上却可以选择多项,经过查看生成的html代码,发现生成的radio的name属 ...

  5. springMVC 接受map参数的写法

    <form > <input type="hidden" name="map['userKey']" value="11111&qu ...

  6. Visual Studio高分屏下Winform界面变形

    现在高分屏的电脑越来越多,2K屏,4K屏层出不穷,对于.net开发人员来说,尤其是Winform开发者, 分辨率一直是个比较头疼的事情,屏幕分辨率高了,如果仍然设置显示100%,会导致字体非常小,影响 ...

  7. c# 获取屏幕图片

    Rectangle bounds = Screen.GetBounds(Screen.GetBounds(Point.Empty)); using (Bitmap bitmap = new Bitma ...

  8. EntityFramework学习要点记一

    一.Entity的注解属性(Annotations)不管是code first还是db first,都需要用到注解属性,至于用System.ComponentModel.DataAnnotations ...

  9. java实现spark常用算子之Union

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  10. linux常用命令(4)

    linux常用命令(4) --- Vim编辑器与Shell命令脚本 如何使用vim编辑器来编写文档.配置主机名称.网卡参数以及yum仓库: 通过vim编辑器将Linux命令放入合适的逻辑测试语句(if ...