이건없지

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

jquery를 이용해서 메뉴 목록에서 선택한 메뉴(탭, 버튼)를 활성화 시키고 나머지는 비활성화 시키기

<style type="text/css">
ul {list-style-type:none;max-width:200px;}
.list {border:1px solid #cccccc;padding:5px;} /* 기본 css 및 선택하지 않은 경우 */
.list.on {border:1px solid #000000;} /* 선택한 경우 css */
</style>

<ul>
 <li class="list"><a href="javascript:;">1. okkks.tistory.com</a></li>
 <li class="list on"><a href="javascript:;">2. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">3. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">4. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">5. okkks.tistory.com</a></li> 
</ul>

<script type="text/javascript">
$('li').click(function() {
 $('li').removeClass('on');
 $(this).addClass('on');
});
</script>

더보기>

- jquery를 이용한 index 값 알아내기

innerHTML을 사용하면 선택한 요소의 하위 요소들에 대해서만 알 수 있다. (jquery에서는 html())

자신을 포함한 하위 요소들을 알고 싶다면 outerHTML을 사용하면 된다.

하지만 IE에서만 사용할 수 있다.

jquery를 이용해서 자신을 포함한 하위 요소값을 알아내기

: div1을 포함한 하위 내용들을 div_view_area에 넣기

<div>

    <div id="div1" style="display:none;">

<div>내용</div>

    </div>

    <div id="div2">div2</div>

</div>

<div id="div_view_area"></div>

var tmp = $('#div1').clone().wrapAll('<div/>').parent().html();
$('#div1').remove();
$('#div_view_area').html(tmp);
$('#div1').show();

첫줄을 보면 clone()와 wrapAll()을 이용해서 div1 하위 요소를 복사한 후 새로운 div 요소를 생성해서 감싼다음 parent()로 부모요소로 이동을 했다.

그리고난후 html()을 이용해서 의도한대로 자신을 포함한 하위 요소값을 알아내서 임시 변수(tmp)에 저장을 했다.

tmp = $('#div1').clone().wrapAll('<div/>').parent().html();

두번째줄을 보면 remove()를 사용하는데 clone()를 이용해서 복사를 했기 때문에

세번째줄에서 div_view_area에 내용을 넣으면 같은 요소가 2개가 생성되므로 넣기전에 기존 요소를 삭제를 했다.

$('#div1').remove();

세번째줄에서 div_view_area 하위에 복사한 내용을 넣는다.

$('#div_view_area').html(tmp);

네번째줄에서 div1를 화면에 보여준다.

$('#div1').show();

더보기>

- jquery outerHTML 구현하기