前端之家收集整理的这篇文章主要介绍了
JS动态添加元素及绑定事件造成程序重复执行解决，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前言
本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件，类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行，很多人在文章里写到了，也说了用off方法来解绑，但都未能点出问题的本质，几乎都忽略了问题的本质其实是事件委托造成的。
话不多说，上点天天看到的代码：
第一种：
第二种：
第三种：
上面的代码，相信不少同盟，天天都会写到，看似简单的事件绑定，却经常能给我们带来意想不到的结果，特别是在这个SPA，应用AJAX页面局部刷新如此盛行的时代。
那什么是事件绑定，造成的程序重复执行呢？这个事情要说清除，好像不是那么简单,还是用一段测试代码来说明吧。你可以拷贝到本地，自己试试：
<
Meta charset="UTF-8">
Title
从逻辑上，看起来没有问题，但仔细观察，发现这是有问题的。当我们第二次，第三次刷新时，弹出框的内容还是和第一次模拟刷新后点击后弹出的内容一致，还是'事故发生点df1'，而非和内容一样递增，为什么呢，感觉事件队列里面的回调函数被单独保存起来了，data被深拷贝了，而不再是一个引用。确实有点难理解，我也不知道到底是为什么，如果哪位能说清楚，还请一定告知。
结个尾写在最后，其实平常写一些程序时，事件绑定，造成程序重复执行这些情况很少发生，其通常会出现在我们写插件的时候，插件需要适应多种调用环境，所以在插件内部做到防止事件重复绑定的情况非常重要。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/34832.html
