下面是一个简化的示例，演示了我遇到的问题。百分之百的代码发布在下面。
三个文件协同工作：testa.php、testb.php和testc.js。（FWIW、testa.php可以用作index.php，但这只是一个演示）
概述：
TESTA.PHP
- 当用户单击锚标记时，将值发送到testb.php
- 接收来自testb.php到div#reportstable的ajax响应，在FORM结构中
- 表单是提交给自己的，因此它打印$_POST数据-
TESTB.PHP
- 通过ajax从TESTA.PHP接收值
- 输出与接收值相对应的表
- （在这个例子中，我删除了接收值的使用方式，但仍然保留了这个结构，因为它会影响testc.js中的jQuery）
TESTC.JS
- 使其（部分）工作的jQuery
问题1：如果用户添加了多个"文档"（即行），POST数据中只显示最后一个文档的数据。
PROBLEM2:DocTitle和FileName ID（dt1，fn1）不会在DOM中显示时发布。在DOM中，它们的ID正确地递增（dt11、dt12、dt13等），但当POSTed时，只有一个ID通过，并且没有递增（添加几个文档后，使用firebug检查表元素。
问题3：添加新文档时单击"选择文件"锚点时，第一次单击不会"占用"你觉得这个怎么样？
TESTA.PHP
<?php
If (empty($_POST)===false) {
echo '<pre>';
print_r($_POST);
echo '</pre>';
die();
}
?>
<html><body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-custom-file-input.js"></script>
<script type="text/javascript" src="testc.js"></script>
<br />
Project*:<br />
<a href="#" id="project_pick">Click Me</a>
<form action="" method="post">
<div id="reportstable">
</div>
</form>
</body></html>
TESTB.PHP
<?php
$project_id = $_POST['project_id'];
if ($project_id == 5) {
echo '
<table id="DocTable">
<tr>
<th width="150">Document Title</th>
<th width="150">File Name</th>
</tr>
<tr name="tr2" id="tr2" style="display:none;">
<td><input type="text" name="dt1" id="dt1"></td>
<td>
<input type="hidden" name="fn1" id="fn1">
<span id="sp1"><a href="#" id="ah1">choose file</a><span>
</td>
</tr>
</table>
<br />
<a href="#" id="add_row">add document</a><br />
<br />
<input type="submit" name="submit" id="submit_it" value="Submit">
';
}
TESTC.JS
$(function(){
var count = 1;
//*******************************************************************
$('#project_pick').click(function(e) {
$(this).hide();
$.ajax({
type: "POST",
url: "testb.php",
data: "project_id=5",
success:function(data){
$('#reportstable').html(data);
}
});
});
//*******************************************************************
$(document).on('click','#ah11',function() {
$(this).file().choose(function(e, input) {
$('#fn11').val(input.val());
$('#sp11').html(input.val());
$('#sp11').css('color','grey');
});
});
//*******************************************************************
$(document).on('click','#ah12',function() {
$(this).file().choose(function(e, input) {
$('#fn12').val(input.val());
$('#sp12').html(input.val());
$('#sp12').css('color','grey');
});
});
//*******************************************************************
$(document).on('click','#ah13',function() {
$(this).file().choose(function(e, input) {
$('#fn13').val(input.val());
$('#sp13').html(input.val());
$('#sp13').css('color','grey');
});
});
//*******************************************************************
$(document).on('click', '#add_row', function() {
$("table#DocTable tr:nth-child(2)")
.clone()
.show()
.find("a, input, span, tr").each(function() {
$(this)
.val('')
.attr('id', function(_, id) {
return id + count;
});
})
.end()
.appendTo("table");
count++;
if (count == 4) {
$('#add_row').prop('disabled', 'disabled');
}
}); //end fn add_row
//*******************************************************************
$(document).on('click', '#submit_it', function() {
alert('This will be submitted now');
});
//*******************************************************************
});
在您的javascript中，您似乎只是在更改id属性的值。但是，当您发布表单时，id属性是不相关的并且没有发布，您需要name属性。
所以，在你更改id的地方，你真的应该更改名称（如果你真的需要id，那么就改为，因为它们需要是唯一的）。
然而，一个简单得多的解决方案是使用数组作为名称，如：
<input type="text" name="dt[]">
如果您复制/克隆具有这些名称的元素并发布表单，您将在$_POST['dt']中获得一个数组。