2017-09-02 4 views
2

私はこのjQueryコードに苦労しています。私がdivを複製したいとき、初めて複製する。 1つのdivだけをクローンします。しかし、私は再びクローンボタンをクリックすると、3回のようにdivをクローンします。何が間違っているのですか?jQueryクローンを複数回追加する

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%' }); 
}); 

私は次のことを試してみましたが、それAINTが取り組んでいます。あなたは以下のようにそれを行う必要があり

$('.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>

+1

私はほとんどがありました!あなたのコードは完璧に機能しました。私は答えとしてこのコメントをチェックします。ありがとうございました。 :) – itvba

+0

@itvbaあなたを助けてうれしい:) :) –

関連する問題