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

复制按钮栏而不克隆

1 个答案: