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 이벤트가 발생한다.]
