[JavaScript] 동적으로 생성된 객체에 이벤트 걸기

문제 상황 : 자바스크립트 파일의 click 이벤트가 먹지 않는다 

구글링을 열심히 했다

 

click가 안 됩니다

JavaScript click 안됨

JavaScript on 이벤트 안됨

jquery click event not working

jquery click event

JavaScript onclick not working

click event not working...  등등

 

열심히 검색해서 찾아봤지만 나랑 똑같은 상황은 아닌 것 같았다

결국 멘토의 도움을 받아 해결했는데 나의 문제는 이것이었다

 

jsp에 테이블을 그려 놓음

js에서 해당 테이블을 날림

js에서 동적으로 테이블을 그림

 

▶결국 나는 동적으로 생성된 객체에 이벤트를 걸었어야 하는데,

순서를 잘못 지정해서

있지도 않은 id에 클릭이벤트를 계속 걸고 있었던 것임 😂

 

바보가 따로 없다

아무튼! 해결을 하는 방법을 알려주셨다 

동적으로 생성된 객체에 이벤트를 걸어보자

 

문제가 된 소스는 아래와 같은 방식이었다

[js]

$("#button").on('click', function(event) {
    alert("클릭이벤트 발생");
});

아무리 눌러도 이벤트 발생 없음..

아무것도 안 찍힘..

 

그래서 멘토님께 피드백 받은 버전은 아래와 같다

동적으로 생성된 객체에 이벤트를 줄 때는 요렇게 짜야 함

[js]

$(document).on('click', '#button', function(event) {
    alert("클릭이벤트 발생");
});

 

그런데 소스를 수정하다 보니까 복수의 아이들에게 이벤트를 주고 싶었다

 

name은 이미 준 상태였고

루프 돌면서 id를 만드는 경우였어서 

동적 영역에 복수 이벤트를 거는 방식으로 소스를 수정함

[js]

$(document).on('click', '[id^=btn_]' function(event) {
    alert("Submit button is clicked!");
});

이 경우에는 id에 btn_으로 시작하는 애들 (복수) 에게 

이벤트를 줄 수 있음

 

 

어찌보면 쉬운데 js와 jsp의 순서를 헷갈려서 삽질을 오래 했다

이벤트가 안 먹히는 경우 동적으로 객체를 생성하고 있지는 않은지 생각해보면 좋을듯!