Klon mehrfach dupliziert, wenn ich nur einen will

Question

Wenn ich auf Duplizieren klicke dupliziert die Zeile fein, aber wenn ich es noch einmal klicke, bekomme ich noch 2, dann 4 usw., wie kann ich das verhindern und nur einen Klonen div auf jeden Klick ...

JQuery:

<script> 

    $(".clonable-button").bind('click', function(e){ 
     e.preventDefault(); 
     var section = $(this).data('clone'); 
     var parent = $('[data-id="' + section + '"]'); 
     var sequence = 0; 

     if(!$(this).data('last')) { 
      sequence = $(parent).find('.cloneable').last().data('id'); 
     } else { 
      sequence = $(this).data('last'); 
     } 

     $(this).data('last', ++sequence); 

     $(parent).append(parent.html()); 

    }); 

    $('.clone-wrapper').on('click', '.clone-remove',function(){ 
     var parent = $(this).parents('.cloneable'); 
     $(parent).remove(); 
    }); 
</script> 

html:

 <div class="clone-wrapper" data-id="skill"> 
      <div class="row cloneable" data-id="0"> 
       <div class="col-md-9"> 
        <div class="form-group"> 
         <label for="skill_name_0">Skills and Qualifications Titles </label> 
         <input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value=""> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="form-group"> 
         <label for="skill_percentage_0">Job Position </label> 
         <input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value=""> 
        </div> 
       </div> 
       <div class="col-md-12 text-right clone-remove" data-last=""> 
        <div class="btn btn-danger btn-sm" data-clone="skill"> 
         <i class="fa fa-times"></i> Remove Skill </div> 
       </div> 
      </div> 
     </div> 
     <div class="white-space-20"></div> 
     <div class="row text-right"> 
      <div class="col-md-12"> 
       <div class="btn btn-default btn-sm clonable-button" id="skill"> 
        <i class="fa fa-plus"></i> Add Skill </div> 
      </div> 
     </div> 

ich den folgenden Code auf jeder dupliziert nur wollen, klicken Sie einmal

  <div class="row cloneable" data-id="0"> 
       <div class="col-md-9"> 
        <div class="form-group"> 
         <label for="skill_name_0">Skills and Qualifications Titles </label> 
         <input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value=""> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="form-group"> 
         <label for="skill_percentage_0">Job Position </label> 
         <input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value=""> 
        </div> 
       </div> 
       <div class="col-md-12 text-right clone-remove" data-last=""> 
        <div class="btn btn-danger btn-sm" data-clone="skill"> 
         <i class="fa fa-times"></i> Remove Skill </div> 
       </div> 
      </div> 

Answer 1

Das Problem ist in dieser Zeile:

var parent = $('[data-id="' + section + '"]'); 

Jedes Mal, wenn Sie neuen Block mit der gleichen Daten-ID-Nummer von Elementen hängen, dass diese Wähler erhöht entsprechen. Um dies zu vermeiden, haben Sie den Selektor spezifischer gemacht. Wie:

var parent = $('[data-id="' + section + '"]:last'); 

Auch gibt es eine jQuery-Methode, um das Element zu klonen. So Ihre Linie von ändern:

$(parent).append(parent.html()); 

zu:

parent.append(parent.clone()); 

, dass das Problem zu beheben.

Answer 2

Sie binden das Click-Ereignis irgendwie mehrfach, Sie sollten entweder einen delegierten Event-Handler verwenden oder die off-Methode wie unten verwenden.

$(".clonable-button").off('click').on('click', function(e){