개발 Q&A

제목 아코디언 UI에서 append(추가)를 했는데, 추가 한 놈은 클릭해도 펼쳐지지가 않네요;;
카테고리 JavaScript
글쓴이 그동안 작성시각 2019/05/28 10:39:57
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 602   RSS

아코디언 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

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/

 

그동안 / 2019/05/28 14:57:38 / 추천 0
배강민님, 감사합니다^^ 예제까지 만들어주신 덕분에 잘 해결 됐습니다^^