javascript - jQuery 奇怪的 Bootstrap 行克隆行为

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 元素