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"); 
});