创建列表时，像在Ranker.com上一样创建多个项目

Create multiple items like on Ranker.com when creating a list

本文关键字：创建 一样 项目 列表 像在 com Ranker      更新时间：2024-04-26

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

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

我找到了这个问题的解决方案。请参阅jsfidd.net

您可能只想生成一个新的文本框，而不是使用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>

正如你所看到的，这是一个非常简单的例子，但你可能可以从这里开始。祝你好运！

相关文章：