以下は、私が抱えている問題を示す簡単な例です。コードの100％が以下に掲載されています。
testa.php、testb.php、testc.jsの3つのファイルが連携して動作します。（FWIW、testa.phpはindex.phpとして機能する可能性がありますが、これは単なるデモです）
概要：
TESTA.PHP
- ユーザーがアンカータグをクリックすると、testb.phpに値が送信されます
- FORM構造内でtestb.phpからdiv#reportstableへのajax応答を受信します
- フォームはそれ自体に送信されるため、$_POSTデータを出力します-
TESTB.PHP
- ajaxを介してTESTA.PHPから値を受け取ります
- 受信した値に対応する出力テーブル
- （この例では、受信した値の使用方法を削除しましたが、testc.jsのjQueryに影響するため、この構造を保持しています）
TESTC.JS
- それを（部分的に）機能させるjQuery
問題1：ユーザーが複数の「ドキュメント」（つまり行）を追加すると、最後のドキュメントのデータのみがPOSTデータに表示されます。。
問題2：DocTitleおよびFileName ID（dt1、fn1）は、DOMに表示されるためPOSTされません。DOMでは、IDは適切にインクリメントされます（dt11、dt12、dt13など）が、POSTされると、1つだけが通過し、インクリメントされません。（いくつかのドキュメントを追加した後、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');
});
//*******************************************************************
});