[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 이벤트 처리가 되는 걸 확인할 수 있다.