クローンが複数回複製されているときに、1つしか必要ありません

Question

複製をクリックすると行が複製されますが、もう一度クリックすると別の2、4などが得られます。 divの各クリック...

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> 

私はちょうど各

をクリックで一度重複次のコードをしたいです

  <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

問題は、この行にある：

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

このセレクタ増加と一致する要素の同じデータID番号を持つ新しいブロックを追加するたびに。したがって、これを避けるには、セレクタをより具体的にする必要があります。類似：

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

また、要素を複製するjQueryメソッドがあります。

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

へ：問題を修正します

parent.append(parent.clone()); 

だから、あなたからの行を変更します。

Answer 2

何らかの理由でclickイベントをバインドしています。委任イベントハンドラを使用するか、以下のようにoffメソッドを使用する必要があります。

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