Question

我尝试创建一个基于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);

提前感谢您的帮助。

[R

Answer 1

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

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

Answer 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++;
}

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

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

2 个答案: