제이쿼리 이벤트 중첩 문제

오늘은 제이쿼리 이벤트 핸들러 중첩 버그를 발견했습니다.

내일 배포 나가야하는데 🥲

문제

라디오 버튼의 change 이벤트가 한번의 change에 여러 번 동작 예시) change 이벤트가 얼럿을 띄우는 경우 change 한번에 얼럿이 여러개 발생

원래 의도

페이지 최초 접근 시 라디오 버튼의 이벤트를 걸어주는 코드가 1회 동작 하여 change 발생 1번에 이벤트 한번씩 동작

실제 동작

사용자의 특정한 행위가 트리거가 되어 라디오 버튼에 이벤트를 거는 코드가 반복하여 수행되어 라디오 버튼에 이벤트가 되어버려서 이후에 change 발생 시 이벤트가 여러번 발생

원인

1. JQuery의 change() 이벤트를 통해 이벤트를 걸어주는 코드가 사용자의 특정한 행위를 트리거로 반복하여 동작함.
2. 이벤트를 걸면 기존에 이벤트에 대한 이벤트 핸들러를 replace 가 아닌 새로운 이벤트 핸들러를 걸어주기 때문에 이벤트가 끝없이 중첩됨

해결

제이쿼리의 off() 함수를 통해 기존의 이벤트를 제거 하도록 추가

---

원래대로는 소스를 분석해서 최초 접근 시 이벤트 바인딩이 되도록 해주고 싶었지만 시간이 급박하여 임시 조치를 취한 수준이라 아쉽습니다.