先來看個例子:
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身上的點擊事件,之前的都是解綁了
致敬我遇到的坑,從此願江湖無此坑.