Дублирующая панель кнопок без клонирования

Question

У меня проблема с дублированием панели кнопок без создания и точного клонирования первой панели кнопок. В моей попытке вторая панель кнопок, которая формируется, работает неправильно. Когда кнопки нажимаются, они ничего не делают. Я хочу, чтобы все дублированные кнопки были новыми и автономными. Любая помощь с этим была бы весьма признательна. В качестве примера см. Мой рабочий код. http://codepen.io/EBM84/pen/RKyNpE?editors=1010

<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> 

Answer 1

Кнопка внутри клонированных участков не работает, потому что .clone() по умолчанию не копирует обработчик событий. Вы также должны использовать .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();