[javascript/jquery] 동적화면에 이벤트 바인딩하기

[JQUERY] 동적화면에 이벤트 바인딩하기

화면개발을 할 때 동적으로 화면을 그려야하는 경우가 있습니다.

최근에는 동적이지 않은 사이트 자체가 거의 없다고 봐야 할 것 같은데요.

이렇게 화면을 동적으로 그릴 때 최초 선언한 이벤트가 실행되지 않는 경우가 생깁니다.

화면이 그려지기 이전 단계에 이미 이벤트가 바인딩 되어버리기 때문이겠죠.

아래 두 가지 예시가 있습니다.

1. 버튼 : $(document).on('click', '셀렉터', handler);

2. 버튼2 : $(셀렉터).on('click', handler);

Result화면에서 버튼을 눌러보시면 결과가 명확하게 보입니다.

1. 버튼을 눌러서 호옹이 버튼을 추가했을 때는 동적으로 추가한 호옹이 버튼에도 이벤트가 제대로 바인딩되어서 얼럿창을 띄웁니다.

2. 버튼2를 눌러서 호옹이2 버튼을 추가한 경우에는 이벤트가 제대로 동작하지 않습니다.

처음에는 이런 현상을 동적으로 화면을 그려준 이후에 다시 한 번 이벤트를 바인딩 시키는 방식으로 작업을 했는데

$(document).on('click', '셀렉터', handler); 이렇게 적용시키는 것만으로 같은 결과값을 가져올 수 있어 이렇게 변경했습니다.

알면 알수록 어려운 화면 개발의 세계입니다. 공부할건 많고 공부할 시간은 없고 놀 시간만 많다는게 함정 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그래서 까먹기 전에 업무 중에 습득한 내용은 바로 포스팅하는 자세를 기릅니다!!