jquery事件重复绑定
本文实例分析了jQuery防止重复绑定事件的解决方法。分享给大家供大家参考,具体如下:
一、问题:
今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行。
下面是一个click事件被重复绑定的示例:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function reg_button_click(){ $("#button).click(function(){ alert("button click"); });}$(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_button_click(); #触发的时候 出现3个alert $('#button').click();}); |
二、解决方法:
对于需要重复绑定的场景,再事件注册时候考虑用先unbind 再bind的方法;或者先off 再on
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function reg_button_click(){ $("#button).unbind('click').bind('click',(function(){ alert("button click"); });}$(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_button_click(); #触发的时候 出现3个alert $('#button').click();}); |
jquery事件重复绑定的更多相关文章
- jquery事件重复绑定的几种解决方法 (二)
防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...
- jquery事件重复绑定的几种解决方法
防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...
- jquery事件重复绑定解决办法
一$.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. //先通过die()方法解除,再通过 ...
- jquery事件重复绑定的快速解决方法
click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件 1 $("#test2&quo ...
- 解决pjax重复加载js导致事件重复绑定的问题
个人博客 地址:http://www.wenhaofan.com/article/20180925232057 1.所有js统一在pjax容器外引入 在pjax容器外引入的js只会被引入一次,所以不会 ...
- JQuery事件的绑定
关于jQuery事件绑定html: <a href="#" onclick="addBtn()">addBtn</a> <div ...
- 解密jQuery事件核心 - 绑定设计(一)
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
- jquery 事件的绑定,触发和解绑
js和jquery绑定的区别? HTML或原生js是单一对应绑定的,绑多了只留最后一个.jQuery是追加绑定的,绑多少执行多少.这个在每一本jQuery的书中都是首先提到的事情. jquery绑定与 ...
- jquery中事件重复绑定以及解绑问题
一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...
随机推荐
- CentOs7下搭建LAMP环境
● 环境搭建 参考: http://blog.csdn.net/zph1234/article/details/51248124 http://www.jb51.net/os/188488.html ...
- notbook1.1
1)95年创建java语言 2)1.2版本使java具有了生产能力 3)1.8版本增加 新的API lamda 函数式编程1.9 使之模块化 4)java编程的基本套路 1. 编写源代码2. 编译源程 ...
- 如何使用IcoMoon字体图标
如何使用IcoMoon字体图标 一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
- POJ 2299 Ultra-QuickSort 离散化加树状数组求逆序对
http://poj.org/problem?id=2299 题意:求逆序对 题解:用树状数组.每读入一个数x,另a[x]=1.那么a数列的前缀和s[x]即为x前面(或者说,再x之前读入)小于x的个数 ...
- linux:基本指令touch, cp 和 mv
touch 新建 #touch 的使用很简单, 我们先去往 Documents 的文件夹, 里面已经有了 folder1 和 file1, 如果我们想新建一个 file2 使用下面的语句就好. 一个空 ...
- RabbitMQ 内存控制 硬盘控制
RabbitMQ服务器在启动时以及abbitmqctl set_vm_memory_high_watermark fraction 执行时,会检查计算机的RAM总大小. 默认情况下下, 当 Rabbi ...
- win10 SVN不能显示图标
参考的解决办法有很多(http://blog.csdn.net/lishehe/article/details/8257545),大多数是操作一下注册表. 我就按照他们的办法,svn的注册表顺序根本上 ...
- [daily][dpdk] 网卡offload识别包类型;如何模拟环境构造一个vlan包
第一部分 硬件识别包类型 网卡,是可以识别包类型的.在dpdk的API中.识别完之后,存在这个结构里: struct rte_mbuf { ...... union { uint32_t packet ...
- 关于ADC采集
对于ADC采集,想问的一些问题 1.如何初始化? 需要初始化 2.哪里可以看到是多少位采集? 3.8位ADC采集的误差是多少? 4.基准电压从哪里取?
- JavaScript学习笔记--语言工具的了解
基础学习,快速入门资料:网站 https://www.liaoxuefeng.com ,http://www.runoob.com/js/js-tutorial.html 笔记: 编程工具:SubLi ...