我正在研究一个由Ajax/PHP驱动的表单序列。提交第一个表单，成功提交后，页面返回使用 Ajax、PHP 和 jQuery 的新表单。第一部分工作正常。在形式成功时产生新形式的部分则不然。
$('#some_form').submit(function (event) {
event.preventDefault();
var form = $(this);
console.log(form);
var formdata = {
'title': form.find('input[name=title]').val(),
'user': form.find('select').val()
};
$.ajax({
type: 'POST',
url: "some_url",
data: formdata,
dataType: 'json',
encode: 'true',
success: function (res) {
if(res.field_errors) {
// If there are errors: do stuff
}
else {
//No errors, so successful submission, time to load new form
var form_div = $("<div>",{"id":"some_div","class":"col-lg-12"});
var table = fill_table(res.data);
var form_content = form_div.load('page_template.html');
//The line below does not work.
form_content.find("#table-div").append(table);
form_div.append(form_content);
form_div.appendTo("#page-wrapper");
}
},
error: function (jqXHR, errorThrown) {
console.log('jqXHR:');
console.log(jqXHR);
console.log('errorThrown:');
console.log(errorThrown);
}
});
)};
fill_table功能（有点笨拙，但仍在进行中）：
function create_table_row(row_data){
var tr = $('<tr>');
var first_td = "<td class='checkbox'><label><input type='checkbox' value="+mi.id+" name='mi[]'/></label></td>";
var second_td = "<td>"+row_data.title+"</td>";
var third_td = "<td>"+row_data.description+"</td>";
var fourth_td = "<td class='file'><a href="+row_data.url+"><i style='vertical-align:middle; line-height:30px;' class='fa fa-1x fa-file-pdf-o'></i></a></td>";
tr.append(first_td);
tr.append(second_td);
tr.append(third_td);
tr.append(fourth_td);
return $(tr);
}
function fill_table(data_pool) {
if(data_pool.length==0){
return "There is no data available yet.";
}
else {
var table = $("<table>",{"class":"mi-list","id":"mi-table"}).append("<tr><th class='checkbox'><label><input type='checkbox' id='bulk' name='data[]'/> </label></th> <th>Title</th><th>Description</th><th>Date</th><th>File</th></tr>");
$.each(data_pool, function(index, val){
table.append(create_table_row(val));
});
return table;
}
}
表函数工作正常，正确加载静态 HTML 部分的.load()也是如此。但是，我似乎无法将生成的表正确添加到刚刚由.load()加载的div中。将表数据记录到控制台向我显示该表在那里，其中包含静态和动态表数据。
form_content.find("#table-div").append(table); 不起作用。 form_content.find("#table-div").html(table);也没有。如何将其正确附加到新div？
由于加载是异步的，因此您需要使用将在加载过程完成后运行的回调。请参阅 jQuery.load（） 文档。
然后，你可以看起来像这样：
form_div.load('page_template.html', function() {
form_content.find("#table-div").append(table);
form_div.append(form_content);
form_div.appendTo("#page-wrapper");
});