クローンを作成せずにボタンバーを複製する

Question

最初のボタンバーのクローンを作成せずにボタンバーを複製する際に問題が発生しています。私の試みでは、フォームの2番目のボタンバーが正しく動作しません。ボタンをクリックすると、何もしません。すべての複製されたボタンバーを新しいスタンドアロンにしたい。これに対する援助は非常に高く評価されます。例として私の作業コードを見てください。デフォルトで.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();