假设当前页面的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. 03 Python基础

    1.输出和输入 (1)print打印 Python 提供print方法来打印信息 输入: print ("hello python") 调用print方法,用户双引号(" ...

  2. STL pair 常见用法详解

    <算法笔记>学习笔记 pair 常见用法详解 //pair是一个很实用的"小玩意",当想要将两个元素绑在一起作为一个合成元素, //又不想因此定义结构体时,使用pair ...

  3. IntelliJ IDEA Spring boot devtools 实现热部署

    一.spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动部署新代码. 二.原理 使用了两个ClassLoader,一个ClassLoader用来加载那些不会变 ...

  4. vs2013nuget版本更新

    记录记录. NuGet 程序包还原失败: “Newtonsoft.Json 12.0.1”程序包需要 NuGet 客户端版本“2.12”或更高版本,但当前的 NuGet 版本为“2.7.40911.2 ...

  5. JS基础_运算符的优先级

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 打包JavaFX11桌面应用程序

    打包JavaFX11桌面应用程序 这是JavaFX系列的第二弹,第一弹在这里 在第一弹中,我们使用的是OpenJDK8,但是OpenJDK8和Oracle Java JDK不一样,它没有内置JavaF ...

  7. python获取文件及文件夹大小

    Python3.3下测试通过 获取文件大小 使用os.path.getsize函数,参数是文件的路径 获取文件夹大小 import os from os.path import join, getsi ...

  8. Presto基础知识

    背景 MapReduce不能满足大数据快速实时adhoc查询计算的性能要求. Facebook的数据仓库存储在少量大型Hadoop/HDFS集群.Hive是Facebook在几年前专为Hadoop打造 ...

  9. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  10. ES6入门三:解构

    数组解构 对象解构 声明与解构相关的问题 解构与重复赋值 按需解构 默认值赋值 解构参数 解构(destructuring):结构化赋值 解构通常被看作ES6的一个结构化赋值方法,可以通过解构将数组元 ...