解析JS绑定事件重复触发问题 第二步

三、原因

此时我们分析上面这段代码这么写有什么问题。为什么会事件会累加执行?可以看出出第二次的事件绑定和第一次的事件绑定都注册到了同一个DIV身上,在JQ中事件注册同时注册到同一个DIV身时。只要不消毁就会累计执行。这就是根本 原因所在。可能有的人此时想到是不是因为事件冒泡的原因,那我们阻止完了事件冒泡结果是什么呢?

$(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 .....");     

       

      });

    });

});

事实结果是一样的。这个跟事件冒泡没有根本上的联系,如果那我是不是只有在绑定时才会出现累计打执行呢。那我们来试下不用on的执行结果是什么

$(function(){

    $(".add").click(function(eve){

      $(".area").append("<button class='test-btn'>test button</button>");      

      $(".test-btn").click(function(){

        console.log("test button .....");

      });

    });

});

结果依然一样,在事件执行的时候在同一个元素上注册执行的事件还是执行了多次。那如何解决这个问题

四、解决方法:

1)绑定之前先解绑

$(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();

       

      });

    });

});

2)分开写

$(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 .....");

            

      });

});

总结:上面列举的只不过是一个小例子,在工作当开发会碰到比这更复杂更多的多层事件问题,尤其在多个URL请求时,如果处理不好,大家不自测和检查自己的代码,就会出来事件一次。多次请求的问题。这些问题也是在公司团队中的同事经常犯的一些错误,所以在今后开发的过程中,要养成一个好的编程习惯 ,才能保证代码的更强壮。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动端周边技术扩展

Vue.js学习笔记(3)

13920
来自专栏Java帮帮-微信公众号-技术文章全总结

错误集锦1-HttpServlet was not found on the Java Build Path。

我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServle...

32870
来自专栏木子昭的博客

webpack手动配置React开发环境

18130
来自专栏Jerry的SAP技术分享

关于SAP UI5数据绑定我的一些原创内容

第6篇文章:https://blogs.sap.com/2015/10/25/how-i-do-self-study-on-a-given-fiori-cont...

18450
来自专栏乐享123

Vim 对选中范围内容批量替换

50680
来自专栏Java架构沉思录

Node.js 三大特点你都懂了吗

在Java、PHP或者.net等服务器端语言中,会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说,理论上,一个8GB内存的服务器...

13430
来自专栏LeeCen

React Native环境搭建 之 nvm安装和使用

brew install watchman flow git gcc pkg-config cairo libpng jpeg gitlab-ci-multi-...

11820
来自专栏Go 语言编程

TOML-to-Go : 帮你快速生成 Go 结构体

TOML 的目标是成为一个极简的配置文件格式。TOML 被设计成可以无歧义地被映射为哈希表,从而被多种语言解析。

77570
来自专栏前端开发

超详细动手搭建一个Vuepress站点及开启PWA与自动部署

类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

97560
来自专栏Ryan Miao

Hello ReactJS

前言 React学习前先搭好环境,官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。 源码:https://github.com/R...

26870

扫码关注云+社区

领取腾讯云代金券