发生环境

$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. perspective属性

    1. 目前只有safari和chrome浏览器支持 -webkit-perspective. 2. 单位为像素 { -webkit-perspective:500 } 该属性只影响子元素的的透视效果.

  2. 在Nginx服务器中设置多个站点

    这里以配置1个站点(1个域名)为例,n 个站点可以相应增加调整, 假设:IP地址: 127.0.0.1域名1 phpmyadmin.zhengwen.cn 放在 /www/phpmyadmin.zhe ...

  3. MSSQL数据库链接字符串Asynchronous Processing=true不是异步查询吗,怎么是缓存

    ;Asynchronous Processing=true  不是异步查询吗,怎么是缓存 <!--<add name="default" providerName=&q ...

  4. python快排算法

    通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列. ...

  5. 使用自己的ClassLoader实现热替换

    首先实现一个自己的ClassLoader,该ClassLoader重写findClass方法. 从classpath中加载类资源. 注意,不要重写loadClass方法.  因为在使用自定义的MyCl ...

  6. bootstrapValidator.js 做表单验证

    有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是b ...

  7. 使用/调用 函数的时候, 前面加不加 对象或 this?

    这个问题, 其实没有细想: 应该是这样的: (想明白了, 就会少很多困惑, 会对语言的把握 会 更深入更透彻) 任何一门 语言, (如果你自己去设计一门语言...). 都要规定 一些 "关键 ...

  8. linuxMint install shuruma

    http://my.oschina.net/u/1446273/blog/306053 http://blog.sina.com.cn/s/blog_5d406a1b0101jlgn.html htt ...

  9. 修改emlog表字段名称

    在em_twitter表中增加一个字段. ,添加一个字段isImportant alter table em_twitter add isImprotant ) not ; ,把字段isImprota ...

  10. IEnumerable 和 IEnumerator

    IEnumerable 接口只包含一个抽象的方法 GetEnumerator(),它返回一个可用于循环访问集合的 IEnumerator 对象,IEnumerator 对象是一个集合访问器. 需要给自 ...