javascript - 动态添加输入 jquery

Question

我想知道我是否可以得到一些关于 jquery 的帮助。这是我现在拥有的html：

http://jsfiddle.net/spadez/9sX6X/4/

<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>

我想要做的是当用户点击“添加”并且只要输入字段不为空，我想做以下事情：

• 将该输入字段ID更改为“已接受”并删除它旁边的添加按钮并用删除按钮替换它
• 在原始输入字段下方添加一个输入字段，其 id 为“当前”，旁边有一个添加按钮

我希望每次单击添加按钮时都会发生此过程，以便越来越多的输入框可以在彼此下方产生。据我所知，试图生成输入框，但即使这样也行不通。

function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}

谁能告诉我这应该如何实现。

Answer 1

我认为每次都克隆现有元素并不是一个好的解决方案。相反，我建议克隆......好吧......克隆））原来的input并button保持不变，只是在视觉上发生了变化。

需要这种行为吗？- http://jsfiddle.net/skip405/9sX6X/6/

Answer 2

利用before()

$('#add').before('<input type="text" name="myinput" />');

因为您需要在提交按钮之前添加新输入（而不是添加到其中，这在此处是不可能的，因为它是一个输入元素）

Answer 3

一个工作示例http://jsfiddle.net/steelywing/9sX6X/12/

$('form').on('click', '.add', function () {
    var row = $(this).closest('div'),
        new_row = row.clone();

    row.find('input:text').addClass('accepted');

    row.find('.add')
        .removeClass('add')
        .addClass('remove')
        .val('Remove');

    new_row.find('input:text').val('');

    row.after(new_row);
}).on('click', '.remove', function () {
    $(this).closest('div').remove();
});