複製按鈕欄而不克隆

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();