发生环境

$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. input的onkeyup效果 超级简短代码

    效果代码 title="请输入正确的十六位数字" onkeyup="javascript: return this.value = this.value.toUpperC ...

  2. 网络框架 & 云端

    Scut 傲瑞组件开发手册(02) -- 轻量级的通信引擎 StriveEngine http://blog.oraycn.com/StriveEngine.aspx

  3. jsp的标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  4. Linux查看软件安装路径

    Linux中查看某 个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除. 添加安装文件等等,很多地方都要用到查案文件安装路径的命令. 这里给大 ...

  5. 将excel文件中的数据导入到mysql

    ·在你的表格中增加一列,利用excel的公式自动生成sql语句,具体方法如下:          1)增加一列(假设是D列)          2)在第一行的D列,就是D1中输入公式:=CONCATE ...

  6. jQuery 取值、赋值的基本方法

    转载:http://www.cnblogs.com/huanhuan86/archive/2012/06/13/2548071.html 获取元素的value值: /*获得TEXT.AREATEXT的 ...

  7. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  8. C# Winform 脱离 Framework (一)

    Linker是一个命令行工具,它以将我们的.net程序生成可脱离.net framework环境运行的程序 . Linker不支持中文的路径,在程序中也不能有中文的标识符. Linker 有2种部署方 ...

  9. Linux运维初级教程(四)shell简介

    查看系统可用的shell命令 cat /etc/shells shell是用于与内核进行交流的工具 管道和重定向(< < > > |) |为管道 标准输入的文件描述符为0,标准 ...

  10. Runas命令:能让域用户/普通User用户以管理员身份运行指定程序。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在某些情况下,为了安全起见,大部分公司都会使用域控制器或只会给员工电脑user的用户权限,这样做能大大提高安全性和可控性,但由此也带 ...