先来看个例子:
html:
1 <body>2 ????<button id="btn">按钮</button>3 ????<button id="btn1">按钮1</button>4 </body>
javascript:
1 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>2 <script>3 $(‘#btn‘).click(function(){4 ????alert(1)5 ????$(‘#btn1‘).click(function(){6 ????????alert(2);7 ????})8 })9 </script>
点击按钮#btn两次会弹出两次1,再点击1次#btn1却弹出两次2,这就是jQuery中的事件叠加问题,下面说解决方案
1 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>2 <script>3 $(‘#btn‘).click(function(){4 ????alert(1)5 ????$(‘#btn1‘).off(‘click‘).click(function(){6 ????????alert(2);7 ????})8 })9 </script>
这样你点击#btn1时就只弹出一次2,不管你#btn点击了多少次,再点击#btn1时就只会得到最近的绑定在#btn1身上的点击事件,之前的都是解绑了
致敬我遇到的坑,从此愿江湖无此坑.
关于jQuery点击事件叠加问题
原文地址:https://www.cnblogs.com/studyshufei/p/8137735.html