Question

我的目标是在我的表单中的bootstrap行上进行克隆，以收集用户的输入。基本上它与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");
});

jQuery奇怪的Bootstrap行克隆行为

2 个答案: