使用jQuery clone（）添加输入行

Question

背景：

我从发票项目详细信息中获得了一组输入元素。我希望用户能够为每个附加项添加输入字段行。

输入标记

<div class="input-row">
    <div class="form-group">
        <label for="item_name">Item:</label>
        <div>
            <input type="text" name="item_name[]" placeholder="Name">
        </div>
        <div>
            <input type="text" name="item_qty[]" placeholder="Quantity">
        </div>
        <div>
            <input type="text" name="item_price[]" placeholder="Price">
        </div>
        <div>
            <input type="text" name="item_total[]" placeholder="Total">
        </div>
    </div>
</div>

添加其他项目的按钮

按钮标记

<div class="col-lg-2">
    <a id="add-item" href="#">Add Item</a>
</div>

按钮Javascript

$('#add-item').click(function(){
    $('.input-row:first').clone().appendTo('.input-row:last');
})

问题：

当我第一次单击add按钮时，它工作正常，并在第一个之后添加一行输入字段，但如果我再次单击它会添加2行然后再次单击它添加4行。我意识到这可能是因为克隆的.input-row div被包含在克隆中，但我试图仅使用:first选择器复制第一个div元素。有任何想法如何解决这个问题？

问题

如何确保只有一个div附加到标记。

Answer 1

到目前为止，我见过的最佳解决方案是以下jQuery库： http://www.andresvidal.com/labs/relcopy.html

Answer 2

解决方案

jQuery appendTo方法将元素添加到现有div中，这意味着当你第二次克隆它时div包含两行输入字段，然后第三次将包含4行输入字段。

要克服此问题，请使用insertAfter()方法

按钮Javascript

$('#add-item').click(function(){
    $('.input-row:first').clone().insertAfter('.input-row:last');
})