jQuery多次追加克隆

Posted 2023-02-22

【中文标题】jQuery多次追加克隆

【英文标题】：jQuery append clones multiple times

【发布时间】：2018-02-11 14:30:00

【问题描述】：

我正在为这个 jQuery 代码而苦苦挣扎。当我想克隆一个 div 时，它第一次克隆很好。它只克隆一个 div。但是当我再次单击克隆按钮时，它会像 3 次一样克隆 div。我做错了什么？

html：

 <div class="screens-duplicate">
   <div class="row">
     <div class="col-lg-12">
       <h2>Breedte en hoogte:</h2>
         <div class="form-group">
          <label for="usr">Breedte:</label>
            <select class="js-example-basic-single" name="selectWidth[]">
              <option>Voer een getal in..</option>
             </select>
           </div>
         </div>
       </div>
     </div>

 <div class="another">
  <!-- here comes the cloned divs !-->
 </div>



 <div class="row">
  <div class="col-lg-12">
    <button type="button" name="screens-duplicate-button" id="screens-duplicate-button" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Clone</button>
  </div>

JS：

$('#screens-duplicate-button').click(function () 
  $('select').select2('destroy');
  $('.screens-duplicate').clone().appendTo('.another');
  $('select').select2( width: '100%' );
);

我尝试了以下方法，但没有用。

$('.screens-duplicate:first').clone().appendTo('.another:last');

【参考方案1】：

你需要这样做：-

$('.screens-duplicate:first').clone().appendTo('.another');

例子：-

$(document).ready(function()
  $('#screens-duplicate-button').click(function () 
    $('.screens-duplicate:first').clone().appendTo('.another');
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screens-duplicate">
   <div class="row">
     <div class="col-lg-12">
       <h2>Breedte en hoogte:</h2>
         <div class="form-group">
          <label for="usr">Breedte:</label>
            <select class="js-example-basic-single" name="selectWidth[]">
              <option>Voer een getal in..</option>
             </select>
           </div>
         </div>
       </div>
     </div>

 <div class="another">
  <!-- here comes the cloned divs !-->
 </div>



 <div class="row">
  <div class="col-lg-12">
    <button type="button" name="screens-duplicate-button" id="screens-duplicate-button" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Clone</button>
  </div>

【讨论】：

我快到了！您的代码运行完美。我将检查此评论作为答案。谢谢你。 :)

@itvba 很高兴为您提供帮助:):)