JavaScript&JQuery)동적 이벤트 바인딩_동적으로 이벤트 할당_on

동적으로 태그의 내용이 변경되는 경우, 변경 이후에는 기존에 바인딩된 이벤트가 동작하지 않게 된다.

나의 경우에는 ajax 통신으로 값을 받아와 태그 속의 내용을 변경 했을 때 그러한 상황을 경험했다.

 

 

그 이유는 동적 태그의 경우 document.ready()의 동작이 작용하지 않기 때문이다. 

document.ready는 페이지가 로드 되면서 이벤트를 할당해주는데 로드 되기 전에 존재 하지 않던 부분이라 이벤트 할당이 되지 않기 때문이다.

 

 

그를 위해서 동적 태그는 아래와 같이 .on을 사용해 주면 된다.

 

$(document).on('click','.selectBox_Branch .box .list', function(e){
	that.listSelectBranch($(e.target));
});