先来看个例子:
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身上的点击事件,之前的都是解绑了
致敬我遇到的坑,从此愿江湖无此坑.