关于jquery on方法进行事件绑定触发次数指数叠加的问题
发生环境:
$modal.on('click', '#search',function(e){});
上面代码的语法是这样的:
.on( events [, selector ] [, data ], handler(eventObject) )
其中$modal为父容器,在该容器上绑定click事件,当id为search的button被点击时才触发function
存在问题:
1. 点击第一次触发一次
2. 点击第二次触发两次
3. 点击第三次触发四次
...
以此类推成指数增长
问题原因:on('click')的重复绑定
解决办法:
1.使用unbind,代码如下:(会取消绑定该容器下所有子元素的click事件)
$modal.unbind('click').on('click', '#search',function(e){});
2.直接使用子元素进行绑定,代码如下:
$('#search').click(function(e){});
tips:
1. on()是将function绑定在元素上
2. click()是将function绑定在click事件上
可能是由于这两个原因导致on可能发生重复绑定多个事件,而只要click一次,click()的function只执行一次
关于jquery on方法进行事件绑定触发次数指数叠加的问题的更多相关文章
- jQuery的4种事件绑定方法
jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...
- jquery 新建的元素事件绑定问题
js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮, ...
- jquery 新建的元素事件绑定问题研究[转]
原文:http://www.cnblogs.com/linzheng/archive/2010/10/17/1853568.html js的事件监听跟css不一样,css只要设定好了样式,不论是原来就 ...
- jquery on方法(事件委托)
jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...
- jquery中的DOM事件绑定与解绑
在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...
- 【JQuery源码】事件绑定
事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...
- [Web 前端] 027 jQuery 相关尺寸与事件绑定
1. 相关尺寸 1.1 获取元素相对于文档的偏移量 var pos = $('#small').offset(); console.log(pos.left, pos.top); 1.2 获取当前元素 ...
- jQuery mouseove和mouseout事件不断触发
关于锋利的jQuery第三章结尾提示图片效果(鼠标放在图片上会出现一个大图跟随鼠标移动)实现时mouseove和mouseout事件不断触发的问题 html <ul class="bo ...
- [jQuery]on和bind事件绑定的区别
on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...
随机推荐
- zencart分类页产品页去掉url中的id号
最近公司新上的网站被seo指出要修改url,去掉url中产品id.由于我们用的是zencart框架,装了 Ultimate SEO URLs 插件,所以在网上应该有这方面的资料,本文主要参考资料: 原 ...
- IIS Express 虚拟目录
1.打开C:\Users\<用户名>\Documents\IISExpress\config\applicationhost.config 2.编辑site节如下(行4) [html] v ...
- IE安全分析
IE安全问题,这个话题似乎很古老了,但是问题又是层出不穷~ 对于IE的安全,我个人认为有两点需要关注,一个是上网的安全,二个是IE解析代码的安全 对于IE上网安全,这是最基本的,也是最常用的了 附上一 ...
- NSOperation GCD 对比 (附NSOperation演练)
项目中使用NSOperation的优点是NSOperation是对线程的高度抽象,在项目中使用它,会使项目的程序结构更好子类化NSOperation的设计思路,是具有面向对象的优点(复用.封装),使得 ...
- angularjs 过滤器详解
https://segmentfault.com/a/1190000002758481 app.controller('testC',function($scope,$filter){ $sc ...
- hdu5009 Paint Pearls (DP+模拟链表)
http://acm.hdu.edu.cn/showproblem.php?pid=5009 2014网络赛 西安 比较难的题 Paint Pearls Time Limit: 4000/2000 M ...
- 2015年11月26日 Java基础系列(一)之String与StringBuffer与StringBuilder的区别
序,StringBuffer是线程安全的,StringBuilder是线程不安全的,但是StringBuilder操作速度快,因此在使用时要根据场景合理选择. StringBuffer和StringB ...
- 1、Java背景、标示符、运算符、转义字符
一.Java平台: 1.Java的创建:1991年由SUN公司创建. 2.Java的特点:面向对象.可移植性.多线程.分布式.可靠.安全. 3.Java的三个架构:JavaEE.JavaSElect. ...
- PHP基础封装简单的MysqliHelper类
MysqliHelper.class.php 1: <?php 2: 3: /** 4: * MysqliHelper 5: * [面向对象的MysqliHelper的简单封装] 6: */ ...
- PHP 暂停函数 sleep() 与 usleep() 的区别
在PHP中暂停代码执行一定时间,有两个函数可以实现,一个是sleep(),另一个是usleep(),它们参数都是一个整数值.sleep()是暂停多少秒,usleep()是暂停多少微秒. 注意:usle ...