创建列表时创建多个项目，例如在 Ranker.com 上答案

【问题标题】：Create multiple items like on Ranker.com when creating a list创建列表时创建多个项目，例如在 Ranker.com 上
【发布时间】：2020-12-18 06:26:43
【问题描述】：

我需要创建一个类似Ranker.com 的表单，用户可以在其中创建一个列表。我的问题是我无法添加多个项目。

我用 div 尝试了.clone().appendTo()，但是当他们创建新的 div 时，我在“新项目”输入中插入的标题重复了，我有 2-3 个 div，标题来自第一个 + 另一个文本。 Here is link to Jsfiddle.net

_{我找到了解决这个问题的方法。请参阅jsfiddle.net}

【问题讨论】：

您好，欢迎来到 StackOverflow！你能告诉我们你到目前为止所做的尝试吗？我们 SOers 喜欢使用 jsfiddle.net 来展示演示 :)
谢谢 Sam，我会提供 jsfiddle.net 的链接。

标签： javascript jquery list

【解决方案1】：

您可能只想生成一个新文本框而不是使用 clone()，因为 clone 会克隆整个内容（文本框的值、名称、id 和您能想到的任何属性）。要生成新的文本框，您可以使用以下代码：

var new_txt = $('<input>').attr({'type' : 'text'});

您可以通过用逗号分隔每个属性来为输入分配更多属性：

$('<input>').attr({'type' : 'text', 'name' : 'something'});

为了实现您想要做的事情，您需要一个容器，您将在其中附加新生成的文本框。

<div id="container">
    <input type="text" id="txt_item"/>
</div>

然后只需使用 live() 方法，以便每次用户在文本框上按 enter 时都会生成一个新文本框：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('input[type=text]').live('keydown', function(e){
    var new_txt = $('<input>').attr({'type' : 'text'});
    if(e.keyCode == 13){//If user press enter
        new_txt.appendTo('#container').focus(); //append then focus to new textbox
    }
});
</script>

如您所见，这是一个非常简单的示例，但您可能可以从这里开始。祝你好运！

【讨论】：