Jquery +表单中的动态附加行

Question

我正在创建一个表单，它可以在输入任何内容时将输入到表单字段中的数据动态插入到数据库中。我现在正在向表单添加动态行（即，如果用户需要添加额外信息，则复制现有行）。我遇到了两个问题。

我使用的代码基于以下内容：

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

问题 1：原始行（在插入下一行之前）工作正常，但我似乎无法弄清楚为什么新行甚至没有尝试使用输入模糊功能通过 $.post 发送数据。是因为所有这些都具有相同的名称，还是因为实际的 $.post 代码已加载到准备好的文档中并且在单击事件后出现表单字段时忽略了这一点？

问题 2：要从新添加的行中插入数据，我是否需要使用 jquery.each 循环遍历表单字段 if 它们具有相同的名称/id？

好吧，此时任何建议都会很好 - 它的头部抓挠时间！

Answer 1

不要使用相同的 ID 和名称，您将朝着正确的方向前进。使用相同的 ID 不是有效的 HTML。

此外，当您发布数据（无论是使用 jQuery.serialize()）还是标准 POST 时，处理信息会容易得多。

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

通过查看您的代码：您也可以使用 DOM 来引用您想要删除的字段。希望这消除了对您拥有的 ID 的需求。

这看起来像：

function addFormField(index) {
$("#divTxt").append("<div ><input name='name"+index+"' type='text' size='20'><a href='#' onClick='$(this.parentNode).remove()'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}