唯品秀前端博客
当前位置: 前端开发 > JavaScript > JS事件重复绑定及触发多次的解决方法

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

2017-10-11 分类：JavaScript 作者：管理员 阅读（8030）

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

在这里我们就废话不多说了，我直接上一个简单的例子，页面上有一个按钮，当点击按钮时创建一个类名为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>

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

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(6) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 6

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

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

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 

最近更新

随机文章

热门标签

caniuse兼容性 阿里CDN CDN大全 博主Github 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新

精彩评论

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 235 篇
  • 草稿数目： 0 篇
  • 分类数目： 14 个
  • 独立页面： 6 个
  • 评论总数： 878 条
  • 链接总数： 13 个
  • 标签总数： 424 个
  • 建站时间： 1008 天
  • 注册用户： 2228 人
  • 访问总量： 8912283 次
  • 最近更新： 2019年9月19日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息