jQuery:提交动态表单元素时出现问题

Question

我正在尝试提交一个表单，其中包含页面完成加载后由 jQ 添加到 DOM 的动态元素。

当我在表单上运行 serialize() 时，它会抓取硬编码到页面中的所有字段的数据 - 但不是动态字段。

这里有一些相同的代码片段..

HTML

<form id="someform" name="someform" method="post" action"">
    <input type="text" name="afield" />
 <ul id="somelist">
 </ul>
 <input type="submit" name="submit" />
</form>

<img id="add" src="add-button.png" />

<div class="new_unit" style="display:none">
 <input type="text" name="somefield" />
</div>

JavaScript

<script type="text/javascript">
// Adds a new field to the form
$( '#add' ).click( function() {
 $( '#somelist' ).append( '<li>' + $( '.new_unit' ).html() + '</li>' );
});

// Validate before submission
$( '#someform' ).validate({
 .......,
 .....,
 submitHandler: submit_form
});

function submit_form() {
 _data = $( '#someform' ).serialize();
 alert( _data );
}
</script>

点击提交按钮后，静态字段 afield 中的数据就会显示...但 jQuery 添加的任何somefields 都不会显示。

我发现了几个 similar questions这里。我正在遵循建议的解决方案，但没有效果。

我正在使用最新的 jQuery (1.4.1) - 并考虑使用 live() 事件绑定(bind)器。我有一种感觉可能有助于解决这个问题，但不知道如何将它与 validate() 插件结合使用。

有什么建议吗？

谢谢， 米^e

Answer 1

问题是您动态添加的字段的名称都相同。您要么必须给它们提供不同的名称，要么根据您在服务器上使用的内容，您可以给它们一个类似 somefield[] 的名称来聚合它们(PHP 和我相信 Python 可以处理这个问题)。

要给它们起一个不同的名称，这样做可能会稍微容易一些:

<input type="text" id="copy" />

和:

$("#add").click(function() {
  $("#copy").clone().removeAttr("id").attr("name", "field[]")
    .appendTo("#somelist").wrap("<li>")
});