关于jQuery点击事件叠加问题

先来看个例子:

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身上的点击事件,之前的都是解绑了

致敬我遇到的坑,从此愿江湖无此坑.