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

【问题标题】：Adding extra input fields when I need them在需要时添加额外的输入字段
【发布时间】：2011-01-18 01:06:58
【问题描述】：

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

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

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

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

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

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

如果第二个文本输入字段的值发生变化，那么我想创建第三个文本输入字段：

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

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

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

提前感谢您的帮助。

【问题讨论】：

标签： jquery forms text dynamic input

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可能想看看使用.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++;
}

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

【讨论】：