下面是一个简化的示例，演示了我遇到的问题。100% 的代码贴在下面。
三个文件一起工作：testa.php、testb.php 和 testc.js。（FWIW，testa.php 可以作为 index.php，但这只是一个演示）
概述：
测试PHP
- 当用户单击锚标记时，将值发送到 testb.php
- 在 FORM 结构中接收来自 testb.php 的 ajax 响应到 div #reportstable
- 表单提交给自己，因此它打印 $_POST 数据 -
TESTB.PHP
- 通过 ajax 从 TESTA.PHP 接收值
- 输出对应于接收值的表
- （在本例中，我删除了接收值的使用方式，但仍保留此结构，因为它会影响 testc.js 中的 jQuery）
TESTC.JS
- 使它（部分）工作的jQuery
问题 1：如果用户添加了多个“文档”（即行），则只有最后一个文档的数据出现在 POST 数据中。.
问题 2：DocTitle 和 FileName ID (dt1, fn1) 未发布，因为它们出现在 DOM 中。在 DOM 中，它们的 ID 会正确递增（dt11、dt12、dt13 等），但是当 POST 时只有一个通过并且它没有递增。（添加几个文档后，使用 firebug 检查表格元素。
问题3：在添加新文档时单击“选择文件”锚点时，第一次单击不会“采取”。对这个有什么想法吗？
测试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');
});
//*******************************************************************
});