언어/js
동적 객체 생성시 on() 메소드 사용해서 이벤트 실행하는 방법
greathuman
2015. 5. 4. 16:05
<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 이상 버전에서 동작한다.