按键时如何在下面创建新的文本字段？

Question

当你添加一个事件时，

last.fm有这个漂亮的功能。你有艺术家字段，当你开始输入它时，它下面会出现另一个文本字段。当您开始键入下一个字段时，下方会出现另一个新字段，依此类推。我一直试图弄清楚如何使用jquery模仿这个功能，但我可以让它只在第一个静止的字段上工作。任何想法？

编辑：

实际上，不，它甚至不适用于静止的，因为它会在每次按键时增加字段

EDIT2：

好吧，所以一些优秀的人已经解决了我的添加问题，现在，只有在第一次按下一个键后才会添加字段。

Answer 1

您可能只将处理程序绑定到第一个静态输入，而不是动态创建的。使用.live()进行事件绑定。这会将事件绑定到与选择器匹配的未来元素。

要确保只添加一个新的，请确保仅在键入最后一个文本框时添加它。检查$(this).closest(".container").next(".container").length以确保没有新的文本框。

$("input.myClass").live("keyup", function (e) {
    var $container = $(this).closest(".container");
    if (this.value && !$container.next(".container").length) {
        var $newContainer $("<div>").insertAfter($container).addClass("container");
        ...
    }
});

Answer 2

直播是正确的想法，但最接近的是过度杀伤：jsFiddle

$("input").live("keyup", function (){
if ( !$(this).next('input').length ) $(this).after('<input type="text"></input>');
});