0

I am having an issue duplicating a button bar without making and exact clone of the first button bar. In my attempt, the second button bar that forms does not work properly. When the buttons are clicked, they do nothing. I want all duplicated button bars to be new and standalone. Any assistance with this would be greatly appreciated. Please see my working code as an example. 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>


EBM84
  • 37
  • 4
  • 1
    `jQuery('.tabs .tab-links a').on('click', function(e) { ... });` needs to be a delegate selector just like your add and remove row selectors. – mhodges Feb 02 '17 at 22:19

1 Answers1

0

Buttons inside cloned sections do not work because .clone() by default do not copy event handlers. You should use .clone(true) if you wish to copy event handlers as well.

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

When cloning events this way, make sure you pick up target elements within event handlers more precisely.

For example:

//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();
adosan
  • 166
  • 3
  • 9