唯品秀前端博客
当前位置: 前端开发 > JavaScript >

JS事件重复绑定及触发多次的解决方法

作者：管理员 2017-10-11 16:51:22 分类：JavaScript 阅读（14188） 0

最近在一个项目开发中遇到事件被重复绑定，如果处理不好就会出现同一事件触发多次的问题，今天我抽出了一点时间把这个问题抛出来给大家说一下原因及解决方法。

在这里我们就废话不多说了，我直接上一个简单的例子，页面上有一个按钮，当点击按钮时创建一个类名为test-btn的button代码插入类名为area的div中，接着点击该button，console.log一段文本，下面是全部代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 <head>
        <style>
            #tableBox{
                width:100px;
                height:30px;
                background:red;
                border:1px solid red;
                text-align:center;
                line-height:30px;
                border-radius:5px;
            }
            .area{
                width:100px;
                height:100px;
                margin-top:40px;
                border:2px;
                border:1px solid #000;
            }
        </style>
    </head>

    <body>
        <div id="tableBox" class="add">按钮</div>
        <div class="area"></div>

        <script>
            $(function(){
                $(".add").on('click',function(eve){
                  $(".area").append("<button class='test-btn'>test button</button>");      
                  $(".area").on('click','.test-btn',function(event){
                    console.log("test button .....");  
                   
                  });
                });
            });
        </script>
    </body>

运行代码结果是：当第一次点击按钮时，成功创建了一个button，再点击这个button执行打印出”test button…”，此时看着好像一切都是那么正常，没什么问题，可是当接着再点击第二次按钮时，此时创建出来第二个button时，再点击刚才第一次创建出来的button，打印出来了3次结果，也就是说点击一次，执行了二次代码。以此类推… 当第三次点击时，就执行了三次代码。貌似这个简单的例子就能很清楚的说明，事件被重复绑定了，好咱们先不着急着找解决方法，我们先来找找原因的所在，再来对症下药。

我们分析分析上面那段代码像这么写有什么问题？为什么事件会多次执行？
可以看出第二次事件绑定和第一次的事件绑定都注册到了同一个按钮身上，只要不消毁就会累计执行。

这就是根本原因所在。可能有的人此时想到是不是因为事件冒泡的原因，那我们阻止完了事件冒泡结果是什么样呢？下面咱们就再来一例，基于上面的js代码稍作修改后是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        $(function(){
            $(".add").on('click',function(eve){
              $(".area").append("<button class='test-btn'>test button</button>");      
              $(".area").on('click','.test-btn',function(event){
                event.stopPropagation();
                console.log("test button .....");    
               
              });
            });
        });
    </script>

事实会告诉你结果是一样的，这个跟事件冒泡没有任何的关系，其实我们可以看看原因是不是在绑定时才会出现多次执行呢？那我们来试下不用on来进行事件绑定，看看执行结果是什么，这里我们再次修改代码如下：

1
2
3
4
5
6
7
8
9
10
  <script>
        $(function(){
            $(".add").click(function(eve){
              $(".area").append("<button class='test-btn'>test button</button>");      
              $(".test-btn").click(function(){
                console.log("test button .....");
              });
            });
        });
    </script>

其实结果依然一样，在事件执行的时候会执行该元素上重复绑定的所有事件。那这个问题我们该如何解决呢？好了，这里我也不卖关子了，下面我来给大家说说解决方法，代码如下：

第一种解决方法：绑定之前先解绑（代码再次修改如下）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <script>
        $(function(){
            $(".add").on('click',function(eve){
              $(".area").append("<button class='test-btn'>test button</button>");
             //解除
              $(".area").off("click");
             //再绑定
              $(".area").on('click','.test-btn',function(event){

                console.log("test button .....");
                event.stopPropagation();
               
              });
            });
        });
    </script>

第二种解决方法：分开写

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        $(function(){
            $(".add").on('click',function(eve){
              $(".area").append("<button class='test-btn'>test button</button>");
             
            });
             $(".area").on('click','.test-btn',function(){
                console.log("test button .....");
                   
              });
        });
    </script>

好了上面只是一个小例子，用来助于大家更容易的理解病因，如果还有朋友不理解，可以试着跑跑上面代码，相信会让你的人生充满记忆 ~

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(7) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"JS事件重复绑定及触发多次的解决方法"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏