发生环境

$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方法进行事件绑定触发次数指数叠加的问题的更多相关文章

  1. jQuery的4种事件绑定方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

  2. jquery 新建的元素事件绑定问题

    js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮, ...

  3. jquery 新建的元素事件绑定问题研究[转]

    原文:http://www.cnblogs.com/linzheng/archive/2010/10/17/1853568.html js的事件监听跟css不一样,css只要设定好了样式,不论是原来就 ...

  4. jquery on方法(事件委托)

    jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...

  5. jquery中的DOM事件绑定与解绑

    在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...

  6. 【JQuery源码】事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  7. [Web 前端] 027 jQuery 相关尺寸与事件绑定

    1. 相关尺寸 1.1 获取元素相对于文档的偏移量 var pos = $('#small').offset(); console.log(pos.left, pos.top); 1.2 获取当前元素 ...

  8. jQuery mouseove和mouseout事件不断触发

    关于锋利的jQuery第三章结尾提示图片效果(鼠标放在图片上会出现一个大图跟随鼠标移动)实现时mouseove和mouseout事件不断触发的问题 html <ul class="bo ...

  9. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

随机推荐

  1. Favorite Games

    Samurai II: Vengeance: http://www.madfingergames.com/games

  2. Robot Framework--11 RF结合Jenkins

    转自:http://blog.csdn.net/tulituqi/article/details/17846463 为什么我们要引入RF?其实最初我们引入RF是为了能够快速的开展自动化验收测试,为敏捷 ...

  3. Spring与Quartz的整合实现定时任务调度 以及crontab的用法

    最近在研究Spring中的定时任务功能,最好的办法当然是使用Quartz来实现.对于一个新手来说,花了我不少时间,这里我写个笔记,给大家参考. 我使用的是Maven来管理项目,需要的Jar包我给大家贴 ...

  4. Java多线程编程核心技术---线程间通信(一)

    线程是操作系统中独立的个体,但这些个体如果不经过特殊处理就不能成为一个整体.线程间的通信就是成为整体的必用方案之一.线程间通信可以使系统之间的交互性更强大,在大大提高CPU利用率的同时还会使程序员对各 ...

  5. Objective-C 链式语法的实现

    对于 Objective-C 的语法,喜欢的人会觉得它是如此的优雅,代码可读性强,接近自然语言,开发者在调用大多数方法时不需要去查看注释或文档,通常只凭借方法名就可以大致知道这个方法的作用,可以理解为 ...

  6. 调整Linux磁盘分区的大小的方法

      昨天数据入库时,一直报错,说磁盘满了,,df -h    一看,发现/目录下只有50G空间,已使用49G:我的程序和dbss都安装在/目录下,ftp到的数据放在/data下的一个子目录下,分解完的 ...

  7. thinkphp 项目分组 -开发随笔1

    php中变量的声明, 和变量的初始化 是结合在一起的, 要声明变量, 就是通过初始化变量来实现的. 感觉页面版式的布局, 还是: 先大致规划出布局, 如两栏 三栏, 一览的左右上下结合, 搭配. 然后 ...

  8. R 字符串处理函数

    用R来处理字符串数据并不是一个很好的选择,还是推荐使用Perl或者Python等语言.不过R本身也提供了一些常用的字符串处理函数,这篇文章就对这些字符串函数做一个简单的总结,具体各个函数的使用方法还是 ...

  9. for 循环中 i++和 ++i

    在标准C语言中, i++和 ++i的区别显而易见. 但是,当在for循环中使用 i++和 ++i的时候,会发现.只要这两种语句不用来赋值操作(作为右值,赋值给左值),那么这两种写法其实是一样的. fo ...

  10. 【转载】利用Unity自带的合图切割功能将合图切割成子图

    虽然目前网上具有切割合图功能的工具不少,但大部分都是自动切割或者根据plist之类的合图文件切割的, 这种切割往往不可自己微调或者很难维调,导致效果不理想. 今天逛贴吧发现了一位网友写的切割合图插件很 ...