关于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只执行一次

时间: 2024-12-06 22:47:16

关于jquery on方法进行事件绑定触发次数指数叠加的问题的相关文章

jquery 新建的元素事件绑定问题[转]

原文:http://www.cnblogs.com/linzheng/archive/2010/10/17/1853568.html js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>            <td>这行原来就

jQuery的4种事件绑定方法

jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品.该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库. 参数: event:必需

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

js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>            <td>这行原来就有</td>            <td><buttonclass="del"&g

jquery中的DOM事件绑定与解绑

在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑定与事件解绑. 1 $(document).on('click.endEdit',function (e) { 2 if(!$(e.target).hasClass('datagrid-cell')&&e.target.tagName!="TD"){ //事件发生后的判断条

jquery中四个事件绑定方式(bind,live,delegate,on)

bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事件处理:例如 $(selector).bind("click",data,function); 多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout"

工作积累(六)——jQuery实现DOM元素事件绑定

用 jQuery 为DOM元素绑定事件时,如果用下面这种方式: <button class="dynamic-bind">按钮一</button> $(function() {   $('.dynamic-bind').on('click', function(e) {     alert(e.type); //'click' }); }); 那么如果在绑定事件之后通过 jQuery 添加与该选择器相同的新的DOM元素: $('.dynamic-bind:las

jQuery挖源码——事件绑定

jQuery版本:2.1.4 最常用事件绑定bind,调用了on. 1 bind: function( types, data, fn ) { 2 return this.on( types, null, data, fn ); 3 } 对应解绑unband,调用了off. 1 unbind: function( types, fn ) { 2 return this.off( types, null, fn ); 3 } 只执行一次的one绑定,赤裸裸调用on. 1 one: function

jQuery mouseove和mouseout事件不断触发

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

第77天:jQuery事件绑定触发

一.元素操作 1. 高度和宽度 $("div").height(); // 高度 $("div").width(); // 宽度 .height()方法和.css("height")的区别: 返回值不同,.height()方法返回的是 数字类型(20),.css("height")返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候 2.坐标值 $("div").offset(