동적 객체 생성시 on() 메소드 사용해서 이벤트 실행하는 방법

<SCRIPT type=text/javascript>
$(function(){

    $(".add_code").html("<a class='btn'>클릭</a>");

     

    $(".add_code>.btn").click(function(){

           alert("버튼이 눌렸습니다.");

     });

})
</SCRIPT>
<DIV class=add_code><A class=btn>클릭</A></DIV>

 

제이쿼리를 사용할때 위와 같이 일반적으로 클릭 이벤트 메소드를 사용한다.

 

<SCRIPT type=text/javascript>
$(function(){

    $(".add_code").html("<a class='btn'>클릭</a>");

     

    $(".add_code>.btn").click(function(){

           alert("버튼이 눌렸습니다.");

     });

})
</SCRIPT>

<DIV class=add_code></DIV>

 

하지만 위 코드 처럼 동적으로 생성한 DOM객체들은 $(".btn").click(function(){}); 등의 이벤트 메소드에 반응하지 않는다.

 

<SCRIPT type=text/javascript>
$(function(){

    $(".add_code").html("<a class='btn'>클릭</a>");

     
	$(document).on('click','.add_code>.btn',function(){
           alert("버튼이 눌렸습니다.");
     });

})
</SCRIPT>

<DIV class=add_code></DIV>

 

동적으로 생성한 DOM 객체를 통해 이벤트 메소드를 실행할려면 위와 같이 .on() 메소드를 사용해야한다.

.on() 메소드의 경우 제이쿼리 1.7.X 이상 버전에서 동작한다.