记录一个关于 Document.on绑定事件后,导致页面卡顿的情况

假设当前页面的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……;
    });

这样既可避免 元素上绑定的点击事件的逻辑重复执行多次。

原文地址:https://www.cnblogs.com/ning-blogs/p/10927073.html

时间: 2024-12-13 12:20:20

记录一个关于 Document.on绑定事件后,导致页面卡顿的情况的相关文章

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

大家都知道 addEventListener的用法 绑定事件 例如 element.addEventListener(type,handler,false); element是dom元素 type是事件比如click handler 是一个函数表达式,false 代表是冒泡阶段 true是捕获阶段 如果移除事件的话 这样写: element.removeEventListener(type,handler); 如果handler是个匿名函数呢 比如 element.addEventListene

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

JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现功能?在执行正常点击事件之前,解绑事件!! JQuery对事件的绑定主要有两种方式,分别是on和bind,这两种方式分别对应的解绑方式为off和unbind,知道这些,我们就可以写代码了: 一,用on和off // off和on绑定"tap"方法 $("#changePasswo

网易新闻控件的创建,scrollView和viewGroup的学习,和up事件后模拟页面回到固定位置

1.viewGroup可以添加控件,也可以用<include layout="@layout/name">添加xml布局文件,在本次实验中将新闻的menu(scrollView布局文件)和正文(mainnews)加入到继承ViewGroup的控件中,但不明白为什么scrollview的宽度和下滑属性没了.导致不能下滑. 一旦发现空间几部分组成就继承viewgroup ,然后重写onmeasure方法,在里面测量所有的孩子,然后重写layout方法布局这些孩子view的位置.

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

$("#btnOktcHc").on("click", function () {}); $("#btnOktcHc").off("click"); on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次.

jquery中不同方式绑定事件后的解绑方法

使用live绑定的事件,用die()解除绑定 使用bind绑定的事件,用unbind解除绑定 使用delegate绑定的事件,用undelegate解除绑定 使用on绑定的事件,用off解除绑定

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

在练习python封装键盘事件的时候,实现一个keyDown和keyUp的功能: @staticmethod    def keyDown(keyName):        #按下按键        win32api.keybd_event(KeyboardKeys.VK_CODE[keyName],0,0,0) @staticmethod    def keyUp(keyName):        #释放按键        win32api.keybd_event(KeyboardKeys.V

windows升级到1607后操作很卡顿的解决办法

CPU I5,固态128G,win7主系统,WIN10和WIN7都安装在固态硬盘上. 未升级之前,操作很流畅,以至于把家里的老古董电脑也换固态,系统换WIN10了.自从升级了1607后这个问题就出现了,进入到桌面倒是挺快的,但一进入桌面,操作什么东西都没反应,等反应过来了突突突出来一大堆,让人很是恼火,但家里的那台电脑升级后什么事也没有,很无语,难道是驱动的问题,考虑要不要重装,办公电脑上有几个软件很大,安装很麻烦,所以就尽量不走重装这条路,禁用服务.启动项.快速启动网上大部分解决方案都试过了,

移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示. 二.用户调整浏览器字体大小,影响的是从浏览器打开的web页 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容i

easyui datagrid设置fit: true后,页面显示不全的情况

跟工具栏有关 <div id="tb"> <div style="float:left;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript: addServer();">新建</a>