[jquery] 동적으로 생성된 태그 이벤트 처리

동적으로 생성된 Html 태그는 일반적인 이벤트 처리가 불가능하다.
이 때문에 동적으로 생성된 태그는 별도의 이벤트 처리를 해줘야 된다.

$("#appendBtn").click(function(){ 
   var tag = "<input type='button' id='btn' value='버튼' />";
   $("body").append(tag);
});
$("#btn").click(function(){ 
   alert("click"); 
 });

위 소스는 appendBtn을 클릭하면 Body 안에 input 태그를 동적으로 생성해준 뒤 동적으로 생성된 input 태그에 이벤트를 걸어 테스트해보는 소스이다. 소스를 실행하면 #btn click 이벤트가 실행이 안되는 걸 확인할 수 있다.

해결법 
$(document).on("click","#btn",function(){}); 
위 on 함수로 이벤트를 걸어주면 동적으로 생성된 태그에 이벤트를 처리할 수 있다.

$("#appendBtn").click(function(){ 
   var tag = "<input type='button' id='btn' value='버튼' />";
   $("body").append(tag);
});
$(document).on("click","#btn",function(){ 
   alert("click"); 
 });

위처럼 코드를 작성하면 #btn 이벤트 처리가 되는 걸 확인할 수 있다.

출처 qjadud22.tistory.com/5