jQuery怪異Bootstrap行克隆行爲

Question

我的目標是在我的窗體的引導行上進行克隆，以收集用戶的輸入。基本上它與this thread完全一樣。然而由於某種原因，我正在經歷克隆的奇怪行爲，現在我真的很困惑。

這是我有DOM：

<div class="cloned-row"> 
    <div class="row" id="row_1"> 
     <div class="col-md-12"> 
      <div class="form-group"> 
       // some inputs here 
      </div> 
     </div> 
    </div> 
    <div class="row" id="row_2"> 
     <div class="col-md-12"> 
      <div class="form-group"> 
       // some inputs here 
      </div> 
     </div> 
    </div> 
</div> 

我克隆的.cloned-row列表子（在這種情況下，與ID row_2行），並希望把它作爲第三排。 （我也會在行被克隆後更改id，但後面會更改，因爲我仍然遇到克隆問題）但由於某種原因，我的克隆jQuery代碼克隆了兩行。所以克隆後它變成了4行。下面是我的jQuery克隆部分：

$(document).on('click', '#plus_now', function(){ 
    $(".cloned-row:last").clone().insertAfter(".cloned-row:last"); 
}); 

尋找某人的指導。這完全出乎意料。感謝你，謝謝。

Answer 1

你克隆整個.cloned-row元素 - 嘗試：

$(document).on('click', '#plus_now', function(){ 
    $(".cloned-row .row:last-child").clone().insertAfter(".cloned-row .row:last-child"); 
}); 

克隆剛剛過去.row元素

Answer 2

您正在克隆最後的.cloned-row（請參閱https://api.jquery.com/last-selector/）。嘗試

$(document).on('click', '#plus_now', function(){ 
    $(".row:last").clone().insertAfter(".row:last"); 
});