[指南] jQuery 浮動跳出框 ( Modal ) 的按鈕事件記得取消

Posted onAuthorANDY LIEN

章節連結

這是一個近期在開發中遇上「重複發送遠端請求」的狀況。簡言之，按鈕事件僅需要註冊一次就好。若你的函式中，有機會多次註冊的話，那記得在執行「關閉畫面、取消……」等功能時，要順便把註冊的事件給清除掉。
jquery

情境

1. 當你按下按鈕時，會同時觸發多次同樣的 request 事件
2. 隨著註冊的事件數量越來越多，那麼發送的 request 也會一起增加
3. 你會發現這個情境，在「重新整理」或是「跳轉」到其他頁面，就會消失
bootstrap modal,jQuery

原因

借用一下 【筆記】來搞懂Event Loop吧！這篇的內文圖：
bootstrap modal,jQuery

當你無形中執行了多次相同的 $(‘#exampleModal’).on(‘btnDOM’, function…) ，也就是 addEventListener(‘click’,function……)。這樣一來，當符合觸發條件時，就會重複發送相同事件。

Demo

在範例中點開 Modal 按鈕時，會逐漸累積註冊相同的按鈕事件，這樣一來發送 request 時，就會出現以上情境了。

解決方法也不難，就是在事件完成、初始化或是關閉視窗時，記得將事件清空即可 $(‘#exampleModal’).off(‘btnDOM’)。若以範例來說，就是將註解掉的 closeButton() 打開即可

Reference

1. Duplicate ajax to call modal and close
2.  jquery .off(): how to remove a certain click handler only?

按讚加入粉絲團

延伸閱讀