복제하지 않고 버튼 모음 복제

Question

첫 번째 단추 모음을 만들고 복제하지 않고 단추 모음을 복제하는 데 문제가 있습니다. 내 시도에서 두 번째 단추 모음을 제대로 작동하지 않습니다. 단추를 클릭하면 아무 것도 수행되지 않습니다. 모든 중복 된 단추 표시 줄을 새롭고 독립형으로 유지하겠습니다. 이것에 대한 도움이 있으면 대단히 감사하겠습니다. 예를 들어 내 작업 코드를 참조하십시오. 기본적으로 .clone() 이벤트 핸들러를 복사하지 않기 때문에 복제 된 섹션 내부

<div id="pfs-tab3" class="tab"> 
<div class="duplicate-sections"> 
<div class="form-section"> 
<section class="duplicate-container"> 
<div class="tabs"> 
<ul class="tab-links main-tab-links button-bar" style="margin-top:0;"> 
<li class="active"><a href="#notes-tab1">box 1</a></li> 
<li><a href="#notes-tab2">Box 2</a></li> 
</ul> 
<div class="tab-content" style="max-height: 125px;"> 
<div id="notes-tab1" class="tab active"> 
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes"> 
<div class="text-field" style="max-width:375px;"> 
<p class="checkbox-label">Name</p><input type="text" class="text-box-column"> 
</div> 
</div> <!-- End .button-bar-scroll --> 
</div> <!-- End .notes-tab1 --> 
<div id="notes-tab2" class="tab"> 
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes"> 
<div class="text-field" style="max-width:375px;"> 
<p class="checkbox-label">Amount</p><input type="text" placeholder="$" class="text-box-column"> 
</div> 
</div> <!-- End .button-bar-scroll --> 
</div> <!-- End .notes-tab2 --> 
</div> <!-- End .tab-content --> 
</div> <!-- End .tabs --> 
</section> <!--duplicate-container --> 
</div> <!-- End .form sections --> 
</div> <!-- End .duplicate sections --> 
<a class="btn btn-duplicate addsection" href="#" role="button" data-section='0'>+ Add</a> 

http://codepen.io/EBM84/pen/RKyNpE?editors=1010

Answer 1

버튼이 작동하지 않습니다. 이벤트 처리기를 복사하려면 .clone(true)을 사용해야합니다. 이 방법으로 이벤트를 복제 할 때

https://api.jquery.com/clone/

, 더 정확하게 이벤트 핸들러 내에서 대상 요소를 선택해야합니다. 예를 들어

:

//following line will show/hide tabs the $(document) //incorrect 
jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 

//following line will show/hide only tabs inside particular ('.form-section') //correct 
jQuery(this).parents('.form-section').find('.tabs ' + currentAttrValue).show().siblings().hide();