动态添加输入jquery

Adding inputs on the fly jquery

本文关键字：jquery 输入 添加 动态      更新时间：2023-09-26

我想知道我是否可以得到一些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更改为"accepted"并删除添加按钮并将其替换为删除按钮
  • 在原来的输入框下面添加一个id为"current"的输入框旁边有一个添加按钮

我希望这个过程发生每次添加按钮被点击，所以越来越多的输入框可以在对方下产卵。据我所知，我试图生成输入框，但即使这样也行不通。

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

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

我认为每次克隆现有元素不是一个好的解决方案。相反，我建议克隆……嗯…原input和button保持不变，只是在视觉上移位了。

需要这个行为吗?——http://jsfiddle.net/skip405/9sX6X/6/

使用before() 

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

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

一个工作示例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();
});
相关文章：