제목 | 아코디언 UI에서 append(추가)를 했는데, 추가 한 놈은 클릭해도 펼쳐지지가 않네요;; | ||
---|---|---|---|
카테고리 | JavaScript | ||
글쓴이 | 그동안 | 작성시각 | 2019/05/28 10:39:57 |
|
|||
아코디언 UI에서 append(추가)를 했는데, 추가 한 놈은 클릭해도 펼쳐지지가 않네요;; 디폴트로 원래 있던 놈 (클릭하면 접히고 펼쳐짐) 학력 추가 클릭해서 추가한 놈 (클릭해도 반응이 없음;;)
<div class="accordion-list"> <ul id="school_accordion"> <!-- loop --> <li> <div class="stit" ><a href="#none">/a></div> <div class="detail"> <div class="row"> <dl class="size-medium02"> <dt></dt> <dd> <div class="p-school"> <input type="hidden" title="학교id" id="school_id" /> <input type="text" title="학교명" id="school_name" /> <div class="school-list" id="school_list"> </div> </div> </dd> </dl> <dl class="size-small"> <dt>전공</dt> <dd><input type="text" title="전공" /></dd> </dl> <dl class="size-medium02 a-date"> <dt>재학기간</dt> <dd> <input type="text" title="" placeholder="2010.01" /> <span class="dash"></span> <input type="text" title="" placeholder="2010.05" /> </dd> </dl> </dl> </div> </div> </li> <!-- //loop --> </ul> </div>
//accordion accordion : function(){ var titTarget = $('.accordion-list .stit > a'); titTarget.on('click',function(){ if($(this).parent().hasClass('on')){ $(this).parent().removeClass('on'); $(this).closest('li').find('.detail').slideUp(200); }else{ $(this).closest('.accordion-list').find('.stit').removeClass('on'); $(this).closest('.accordion-list').find('.detail').slideUp(200); $(this).closest('li').find('.stit').addClass('on'); $(this).closest('li').find('.detail').slideDown(200); } }) $('.accordion-list > ul > li:first-child .stit').addClass('on') $('.accordion-list > ul > li:first-child .detail').slideDown(200) },
|
|||
다음글 | session_id() 관련문의 | ||
이전글 | 게시판 기능중 보기 페이지에서 다음글 이전글 구현시 현... (2) | ||
배강민
/
2019/05/28 14:01:39 /
추천
0
|
그동안
/
2019/05/28 14:57:38 /
추천
0
배강민님, 감사합니다^^ 예제까지 만들어주신 덕분에 잘 해결 됐습니다^^
|
on이 추가된 element에서도 이벤트가 먹는건 맞긴 하지만, 기본 셀렉터 안에 포함된 경우에 동작합니다.
위는 최초에 ".accordion-list .stit > a" 찾아서 이벤트를 걸게 되는데 이렇게는 추가된 element에 이벤트가 먹지 않습니다.
하려면
$(document).on('click', '.accordion-list .stit > a', function() {
거나 타켓을 줄이려면
$('#school_accordion').on('click', '.accordion-list .stit > a', function() {
정도로 해야합니다.
간단히 예제를 만들어봤습니다. https://jsfiddle.net/wvodakm1/