Duplizieren der Schaltflächenleiste ohne Klonen

Question

Ich habe ein Problem, eine Schaltfläche zu duplizieren, ohne die erste Schaltfläche zu erstellen und exakt zu klonen. Bei meinem Versuch funktioniert die zweite Formularleiste nicht richtig. Wenn auf die Schaltflächen geklickt wird, tun sie nichts. Ich möchte, dass alle duplizierten Schaltflächen neu und eigenständig sind. Jede Hilfe mit diesem würde sehr geschätzt werden. Bitte sehen Sie sich meinen Arbeitscode als Beispiel an. 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

Buttons innerhalb geklont Abschnitte funktionieren nicht, weil .clone() standardmäßig keine Event-Handler kopieren. Sie sollten .clone(true) verwenden, wenn Sie Event-Handler ebenfalls kopieren möchten.

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

Wenn Ereignisse auf diese Weise das Klonen, stellen Sie sicher, dass Sie Zielelemente innerhalb Event-Handler genau mehr abholen.

Zum Beispiel:

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