[JavaScript&jQuery] 동적 생성 HTML에 이벤트 추가하기

HTML에 클릭 이벤트를 거는 것은

아래와 같이 할 수 있다.

$("SELECTOR").click(function(){
	alert("click");
});

 

이때 동적으로 생성된 HTML에도 이벤트를 걸 때는 다른 방식으로 걸어야 하는데,

$(document).on("click", "SELECTOR", function(){
	alert("add event");
});

 

위에 click 이벤트의 경우에는 태그(SELECTOR)에 클릭 이벤트를 걸어서,

해당 이벤트를 건 이후에, 동적 생성된 태그에 대해선 이벤트가 작동하지 않는데,

 

아래처럼 on을 사용해서 하면 이벤트를 연결시키면,

태그(SELECTOR)가 document에 동적으로 추가되더라도 이벤트가 작동된다.