click on 이 한 번에 실행되지 않는 이슈 (jsp 내의 script 수정)

Spring boot 내의 jsp 파일을 작성하여 프론트를 구성했었는데, 버튼이 한 번에 클릭되지 않는 이슈가 생겼었다.

(처음 접속시 페이지를 한 번 새로고침해야 이슈가 해결됐었다.) 

이러한 오류들을 해결하기 위해서 찾아본 결과 아래의 코드가 문제였다.

// 원래의 코드
$("#locationBtn").on("click", function(){};

이러한 형태의 코드는 이벤트 위임이 올바르게 설정되어있지만,

페이지가 처음 로드될 때 동적으로 생산된 요소가 없어서 위와 같은 이슈가 생길 수 있다고 한다. 

따라서 페이지가 처음 로드될 때 이미 있는 요소들에 대해서도 이벤트 위임을 설정하여 페이지가 로드될 때 이벤트 핸들러가 모든 요소에 바인딩 되게 하여 동적으로 생선된 요소뿐만 아니라 초기에 있는 요소에 대해서도 이벤트 처리가 정상적으로 작동할 수 있게 만든다. 

따라서 아래와 같이 코드를 바꿔주면 정상적으로 클릭 함수가 작동하는 것을 볼 수 있다.

// 수정된 코드
$(document).on("click", "#locationBtn", function () {};