解决jquey中当事件嵌套时,内层事件会执行多次的问题
生活随笔
收集整理的這篇文章主要介紹了
解决jquey中当事件嵌套时,内层事件会执行多次的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
出現情景:當內層事件需要外層事件觸發后產生的一些值得時候
情景復現:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>測試</title> </head> <body><button id="btn1">外層事件</button><button id="btn2">內層事件</button> </body> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <script>var count1=0;//記錄外層事件執行次數 var count2=0;//記錄內層事件執行總次 $('#btn1').on('click',function () {count1++;var testStr='外層中的字符串';console.log('第'+count1+'次外層事件')$('#btn2').on('click',function () {count2++;console.log(testStr);console.log('第'+count2+'次內層事件');})}) </script> </html>頁面效果?
控制臺內容:
可以看到每執行一次外層事件:
再次執行內層事件時,次數會一直累加
解決辦法:
在內層事件綁定之前 利用$(selector).unbind(event) 方法先解綁一次:
更改的js代碼如下:
<script>var count1=0;//記錄外層事件執行次數 var count2=0;//記錄內層事件執行總次 $('#btn1').on('click',function () {count1++;var testStr='外層中的字符串';console.log('第'+count1+'次外層事件')$('#btn2').unbind('click');//新增 解除綁定的click事件$('#btn2').on('click',function () {count2++;console.log(testStr);console.log('第'+count2+'次內層事件');})}) </script>?
再次進行測試:
?
?解決內層事件多次被觸發的問題
轉載于:https://www.cnblogs.com/roseAT/p/10355754.html
總結
以上是生活随笔為你收集整理的解决jquey中当事件嵌套时,内层事件会执行多次的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： K - FatMouse and Che
- 下一篇： 读《程序是怎样跑起来的》第七章有感