动态生成的html绑定click事件没有效果不执行 click事件重复绑定问题

在js里面,click事件是存在重复绑定的情况的,如果你做了

比如说,一个函数会执行多次,你每次都把绑定了click事件,那么他就会累加

点一次相当于点了好几次

 

还有就是对于动态生成的html如果append到某个div上面

原有的绑定的click事件是不生效的

需要重新绑定

 

比如我现在遇到的问题:

场景就是手机端的网页,滚动下拉加载更多的内容,也就是分页加载

滚动一下,如果有更多的内容,就会加载下一屏内容,追加到当前的内容后面

说白了就是给这个div append一段html,这段html内容是js拼接的,遇到这个问题的我想肯定都知道这些了,就不多说了

 

出现的问题:只有最开始的一页数据有click事件,动态加载出来的没有

 

1,js里面对这些类进行了click事件绑定,但是,后续append进来的却并不能生效,点击无效果

想到应该是执行绑定事件的时候,这些元素还没有生成,根本就不存在,就没办法绑定了,后续动态生成,这些绑定的代码也没有执行

所以想着把这些绑定的代码,在追加到div之后,重新执行以下绑定的操作

 

于是就这么做了:

            container.append(_html);    (var container = $("#con2"); )         这个就是需要追加的地方的一个div    

             $('.section-mobi03').on('click',function(){

                //..这里面是展开下拉列表,点击执行展开和收起的效果

 

                })  

 

但是这样子又新出现一个问题:

点击的时候有的时候看起来好像有作用

有的时候好像没作用

加了打印信息console.log()

才发现

有的时候看起来没作用是因为重复绑定了,

如果重复绑定了2次,那就相当于点开了有点击了一下,就又收起来了

所以看起来没有效果

有的时候会看到点击了好多次

 

这是因为没执行一次的加载,都会执行绑定事件的行为

执行了之后就会把原来的又进行了一次绑定click事件

所以就累加起来了

 

所以需要每次在执行绑定click事件的基础上,去掉绑定

      $(".section-mobi03").unbind('click');

需要增加这么一行

完整的就是

         container.append(_html);    (var container = $("#con2"); )         这个就是需要追加的地方的一个div
          $(".section-mobi03").unbind('click');        
          $('.section-mobi03').on('click',function(){
                //..这里面是展开下拉列表,点击执行展开和收起的效果
          }) 

 

这样子了

 

注意,unbund()事件,如果不带参数,就是默认的解绑所有的事件的

带上click参数就是解绑click事件

这样子的话,每一次执行绑定事件的时候,都会先把所有的click事件进行去绑定,然后进行重新加载,就不会出现重复加载的问题了

 

这就是开发过程中出现的一个小问题,希望有遇到的可以参考

另外注意:对于jquery的绑定事件

不同的版本有不同的区别写法,如果有问题可以往这个思路上想一下

on还是live还是什么的