克隆複製多次，當我只想要一個

當我點擊複製它重複行罰款，但是當我再次點擊我得到另一個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>

來源

2016-03-29 4334738290

您的活動監聽者正在複製併發射多次 – GojiraDeMonstah

的問題是在這條線：

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

每次追加與匹配該選擇器的增加的元件的相同的數據的ID號的新塊。所以爲了避免這一點，你已經使選擇器更具體。像：

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

此外還有一個jQuery方法來克隆元素。因此，改變你的路線從：

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

到：

parent.append(parent.clone());

這將解決這個問題。

來源

2016-03-29 20:21:19

謝謝，哥們... – 4334738290

您以某種方式多次綁定click事件，您應該使用委託事件處理程序或使用下面的off方法。

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

來源

2016-03-29 19:55:25 Sachin

克隆複製多次，當我只想要一個

回答

相關問題