jquery - 如何获取动态字段值 - jQuery

Question

我对 jQuery 很陌生，我不知道如何实现这个场景。

例如，如果我有一个表单，其中包含两个文本框，分别是原始名称和电子邮件。右侧是一个加号按钮，用户可以按下该按钮，然后将在下面创建另一个原始数据，其中包含两个字段“名称”和“电子邮件”，第二个原始数据将在右侧有一个 X 按钮，用户可以单击该按钮，该原始数据将被删除。

姓名:_____ 电子邮件:____ em>___ +

姓名:_____ 电子邮件:____ em>___ X

姓名:_____ 电子邮件:____ em>___ X

姓名:_____ 电子邮件:____ em>___ X

<小时/>

• 保存 -

表单底部有一个“保存”按钮。当用户按下它时，所有框中的值都会被获取并保存......这不是问题。

我的问题是如何实现动态字段并在按下“保存”时从字段中选取值？

Answer 1

DEMO 试试这个代码:

   $(document).on("click",".add",function(){
       //take the id
       var id = parseInt($(this).attr('id').substr(4));
       id = id+1;
       //add new row I don't know if you have a table or div layout

       $(this).after('<p><input type="text name="name_'+id+'" id="name_'+id+'"/> <input type="text" name="email_'+id+'" id="email_'+id+'"/><input type="button" id="remove_'+id+'" class="remove" value="X"/><input type="button" class="add" id="add_'+id+'" value="+" /></p>');
    });
    $(document).on("click",".remove",function(){
       //take the id
       var id = $(this).attr('id').substr(7);
       //delete
       $("#name_"+id).remove();
       $("#email_"+id).remove();
       $("#add_"+id).remove();
       $("#remove_"+id).remove();
    });

你的html

  <p><input type="text name="name_1" id="name_1"/> <input type="text" name="email_1" id="email_1"/><input type="button" id="add_1" value="+" /></p>