jquery 동적 이벤트 추가 제어하기 / jquery ajax selector / dom 추가 생성 / table 태그 추가

jquery div, table 등의 태그를 동적 생성을 하게 되면 click 이벤트 등이 반응을 하지 않게 되는데

이런 경우 on을 이용해서 처리할 수 있다.

 

예> html

<div class="dom">
 <ul>
  <li>http://okkks.tistory.com/1065 [기본]</li>
 </ul>
 <button type="button" class="add">추가</button>
</div>

 

예> javascript + jquery

<script type="text/javascript">

$('.dom .add').click(function() {
 $('.dom ul').append('<li>http://okkks.tistory.com/1065 [추가]</li>');
});

 

/* 기존 방식 */

/*
$('.dom ul li').click(function() {
 alert($(this).text());
});
*/

 

/* 동적 방식 */

$(document).on('click', '.dom li', function() {
 alert($(this).text());
});

</script>

 

 

 [기존 방식으로 하는 경우 추가된 부분은 click 이벤트가 반응을 하지 않는다.]

 

 

[동적 방식으로 처리하는 경우 추가된 부분도 click 이벤트가 발생한다.]