发生环境:
$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 ...
随机推荐
-
常州培训 day5 解题报告
第一题:(贪心) 题目大意:给出N*M的矩形,要用正方形将它铺满(正方形之间不能重叠),相邻的正方形颜色不能相同,颜色用ABCD表示.要求从上到下从左到右字典序最小. N,M<=100 解题过程 ...
-
WPF——执行命令清空文本框
一.造一个窗体,在窗体里面先造一个StackPanel,然后再StackPanel里面放好按钮和文本框,注意给所有的控件和容器起名字 <Grid> <StackPanel Name= ...
-
CSS三角形广告文字
街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...
-
Python基础 1----Python语言基础和Python环境准备与安装
引导语: 人们学习Python是因为他们爱这门语言,因为他们追寻美,如果我雇用一个Python程序员,那么他们的技术将非常的棒 1 Python是一门跨平台的语言,是一种面向对象的动态编程语言 发布时 ...
-
上架app被拒原因总结
1. Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound by ...
-
SQL编程的一些良好好习惯
|转载自:cnblog |原文链接:http://www.cnblogs.com/MR_ke/archive/2011/05/29/2062085.html 我们做软件开发的,大部分人都离不开跟数据库 ...
-
R语言包下载(转载)
http://blog.csdn.net/hongjinlongno1/article/details/53130893 包含几乎所有包,很方便
-
JavaBean,List,Map,json格式之间转化方式
public class TestBean { private String id; private String name; private String password; public Stri ...
-
order by group by
order by 后 group by连用, mysql好像 >5.4不起作用 通过 explain 查看执行计划,可以看到没有 limit 的时候,少了一个 DERIVED 操作 估计是内部优 ...
-
安装eclipse scala插件
1.安装eclipse插件,依次点击Help->Eclipse Marketplace 2.输入scala,点击go,进行搜索 3,出现了Scala IDE4.7X,点击右下方的Install进 ...