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

章節連結

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


情境

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

原因

借用一下 【筆記】來搞懂Event Loop吧!這篇的內文圖:
bootstrap modal,jq modal,jQuery,jquery bootstrap modal,jquery modal,jquery model,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?

按讚加入粉絲團

延伸閱讀