자바스크립트 동적으로 생성된 요소에 이벤트 걸기

자바스크립트 동적으로 생성된 요소에 이벤트 걸기

 

동적으로 생성된 노드, 혹은 그리드 같은 요소에는

 

아래와 같이 함수를 쓸경우 이벤트가 발생하지 않는 문제가 있었다.

$('#elmtId').click(function(){
   aleart("클릭 이벤트");
})

 

해결 방안은  on 함수로 이벤트를 걸어주는 것 ...!

 

documetn.on()을 사용하는 것

$(document).on("click","#elmtId",function(){
 	aleart("클릭 이벤트");
}); 

혹은

$("#elmtId").on("click",function(){
 	aleart("클릭 이벤트");
}); 

사용하면 된다고 하는데 그리드에서는 2번째는 적용되지 않는듯하다.

 

 

documetn.on()을 사용했을 때 이벤트가 중복 발생하는 문제도 있었다.

 

1. 요소 아이디값이 유니크하지 않았기때문에 발생  ->  유니크한 아이디값을 주어 이벤트 발생 

2. 이벤트 바인딩제거가 제대로 이루어지지않음(이유를 모르겠음 같은 탭을 누를경우 두번씩 발생)

                                                                                             ->  $(document).off();  를 사용하여 해결 

                                                                                             (jquery 버전이 1.7 미만일 경우는 .unbind() 함수를 사용)

 

 

아래와 같은 코드로 해결하였다.

function getEvent(){
  $(document).on("click","#elmtId",function(){
 	aleart("클릭 이벤트");
  }); 
}

$(document).ready(function() {
	$(document).off();
	getEvent(); // 이벤트 함수
}