在需要时添加额外的输入字段

I trying to create an HTML/CSS/JavaScript based list manager.

我尝试创建一个基于HTML / CSS / JavaScript的列表管理器。

I'm using text input fields as my individual list items, with the first text input field being:

我正在使用文本输入字段作为我的单个列表项，第一个文本输入字段是：

<input type="text" id="input1" value="Enter your first item" />

I'm using jQuery to create a new text input field if I've used the previous text input field:

如果我使用了以前的文本输入字段，我正在使用jQuery创建一个新的文本输入字段：

<input type="text" id="input2" value="Add another item" />

The jQuery code checks if the value of the first text input field has changed, and then creates the second text input field.

jQuery代码检查第一个文本输入字段的值是否已更改，然后创建第二个文本输入字段。

If the value of the second text input field changes, then I want a third text input field to be created:

如果第二个文本输入字段的值发生更改，那么我希望创建第三个文本输入字段：

<input type="text" id="input3" value="Add another item" />

I use jQuery to keep track of the ids of each text input field, and to manage the creation of new ones. However, it only creates a new text input field only if the first text input field, input1, changes. I want it to create a new text input field if the last text input field changes. This is the code I use to create the new text input field:

我使用jQuery来跟踪每个文本输入字段的ID，并管理新的文本输入字段的创建。但是，仅当第一个文本输入字段input1更改时，它才会创建新的文本输入字段。如果最后一个文本输入字段发生更改，我希望它创建一个新的文本输入字段。这是我用来创建新文本输入字段的代码：

oldNum = newNum;
newNum++;
var newElement = $("#input" + oldNum).clone().attr('id', 'input' + newNum).attr('value', 'Add another item');
$("input").last().after(newElement);

Thanks in advance for your help.

在此先感谢您的帮助。

2 个解决方案

#1

You can use jQuery's live function to only handle the change event for the last input, like this:

你可以使用jQuery的live函数来处理最后一个输入的change事件，如下所示：

$('input:last-child').live('change', function() {
    $(this).after('<input id="input' + ++newNum + '" value="Add another item" />');
});

#2

You may want to look at utilizing the .one() event binding syntax. It executes an action at most one time, so you can attach it to each input field as it is created.

您可能希望查看使用.one（）事件绑定语法。它最多执行一次动作，因此您可以在创建时将其附加到每个输入字段。

var current = 1;
$("input1").one("change",createNextInput);

function createNextInput()
{
    var next = current + 1;
    var newElement = $("input"+current).clone().attr({id: "input"+next,value: "Add another item"});
    $("input"+current).after(newElement);
    $("input"+next).one("change",createNextInput);
    current++;
}

You could probably optimize that some, but you get the idea.

你可以优化一些，但你明白了。

#1