Question

我想知道我是否可以通过jquery获得一些帮助。这是我现在的HTML：

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

我想要做的是当用户点击“添加”时，只要输入字段不为空，我想执行以下操作：

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

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

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();
});

在动态jquery上添加输入

3 个答案: