使用jQuery clone（）添加输入行

时间：2022-11-13 20:27:14

Background:

I've got a set of input elements form invoice item details. I want a user to be able to add rows of input fields for each additional item.

我有一组输入元素形成发票项目的详细信息。我希望用户能够为每个附加项添加输入字段行。

Input Markup

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

And a button to add an additional item

还有一个添加其他项目的按钮

Button Markup

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

Button Javascript

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

Problem:

When I click the add button the first time, it works fine and adds a row of input fields after the first one, however if I click it again it adds 2 rows and then click it again it adds 4 rows. I realise this may be because the cloned .input-row div is being included in the clone, but I'm trying to only copy the first div element using the :first selector. Any ideas how to resolve this?

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

Question

How can I ensure only one div is appended to the markup.

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

2 个解决方案

#1

0  

The best solution I've seen so far is the following jQuery Library: http://www.andresvidal.com/labs/relcopy.html

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

#2

-1  

Solution

The jQuery appendTo method adds the element into the existing div, meaning when you clone it the second time the div contains two rows of input fields and then the third time will contain 4 rows of input fields.

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

To overcome this use the insertAfter() method

要克服这个问题，请使用insertAfter（）方法

Button Javascript

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

#1

0  

The best solution I've seen so far is the following jQuery Library: http://www.andresvidal.com/labs/relcopy.html

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

#2

-1  

Solution

The jQuery appendTo method adds the element into the existing div, meaning when you clone it the second time the div contains two rows of input fields and then the third time will contain 4 rows of input fields.

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

To overcome this use the insertAfter() method

要克服这个问题，请使用insertAfter（）方法

Button Javascript

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

相关文章