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

Question

我需要在Ranker.com上创建一个用户可以创建列表的表单。我的问题是我不能添加多个项目。

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

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

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

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