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