동적 객체 추가시 이벤트 발생

appendTo를 이용해 객체를 동적 추가 시  $(document).ready(function() 에 선언해 놓은 이벤트들이 작동하지 않을 수 있다.

 

예를들어 다음과 같은 코드가 있다.

<ul id="list">

<li class="alert">클릭</li>

<li class="alert">클릭</li>

<li class="alert">클릭</li>

</ul>

<a href="#none" class="add">추가</a>

<script type="text/javascript">

$(document).ready(function() {

$(".alert").click(function() {  

        alert("Hello!");

});

$(".add").click(function() {  

        $("<li class=\"alert\">클릭</li>").appendTo("#list");

});

});

</script>

추가를 클릭할때마다 li태그가 추가가 되는데 기존의 세개 li를 클릭하면 알럿창으로 Hello를 출력하지만

새로 추가된 li를 클릭하면 변화가 없다. 즉 document.ready에서 문서가 로딩될때 있었던 세개의 li에만 클릭이벤트가 적용된 것이다.

그렇다면...새로 추가된 li에 이벤트를 적용하고 싶다면?

live를 추가해주면 된다. 어떻게?

이렇게!

$(".alert").live("click", function(){

alert("Hello!");

});