[指南] jQuery 浮动跳出框 ( Modal ) 的按钮事件记得取消

章节连结

这是一个近期在开发中遇上“重复发送远端请求”的状况。简言之,按钮事件仅需要注册一次就好。若你的函式中,有机会多次注册的话,那记得在执行“关闭画面、取消……”等功能时,要顺便把注册的事件给清除掉。
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?


按赞加入粉丝团

延伸阅读