我的 HTML 页面中有几个表单，它们的提交是由 jQuery 函数促进的。他们工作得很好。但是，我遇到了动态创建的表单的问题。它们不是通过 jQuery 提交，而是发布到当前的 HTML 页面。
例如，我有一个使用 PHP 动态创建的表。该表可以更新，因为它包含在表格中。
下面是生成表格的代码：
//Display table
echo "<form id=\"UpdateUsers\" method=\"post\">";
echo "<table>
<thead>
<tr>
<th>User Id </th>
<th>First Name</th>
<th>Last Name</th>
<th>Current Publisher</th>
<th>User Priveleges</th>
</tr>
</thead>
<tbody>
<tr>";
foreach($publishers as $row)
foreach($row as $col)
{
$i++;
switch ($i) {
case 4: //Is it a current publisher?
if($col == 0)
echo "<td><input type=\"checkbox\" class=\"current\" name=\"UserState[$row[0]]\" value=\"1\" ></td>\n";
else
echo "<td><input type=\"checkbox\" class=\"current\" name=\"UserState[$row[0]]\" value=\"1\" checked> </td>\n";
break;
case 5: //Do they have user priveleges?
if($col == 0)
echo "<td>No</td>\n";
else
echo "<td>Yes</td>\n";
echo "</tr><tr>"; //start a new row
$i=0; //reset counter
break;
default:
echo "<td>$col</td>\n";
}
}
echo "</tr></tbody></table>";
echo "<button type=\"submit\">Update</ button>";
echo "</form>";
}
表格id很清楚UpdateUsers。
这是 jQuery 代码：
$(document).ready(function () {
$('#UpdateUsers').submit(function (e) {
e.preventDefault();
$('#results').contents().remove();
//Make sure all checkboxes are submitted
var cb = this.getElementsByTagName('input'); //Get the inputs
for(var i=0;i<cb.length;i++){
if(cb[i].type=='checkbox' && !cb[i].checked) // if this is an unchecked checkbox
{
cb[i].value = 0; // set the value to "off"
cb[i].checked = true; // make sure it submits
}
}
var formData = $(this).serialize();
$("input").prop("disabled", true);
request = $.post('VRC_PublishersProcess.php', formData, resultsMessage);
request.fail(function() {
$('#results').append("<span id=\"reply\">Updating failed for an unknown reason. Please try again in a few minutes.</ span>");
$("input").prop("disabled", false); });
function resultsMessage(data) {
$('#results').append(data);
$("input").prop("disabled", false);
}
});
});
这个 jQuery 函数过去曾使用过，因此它应该是有效且可运行的代码；我怀疑这是问题的根源。
我的怀疑是，当浏览器加载时，它正在处理和“链接”jQuery 和 HTML 代码。一旦一个新的表单动态出现，浏览器就不知道有一个 jQuery 函数来处理提交请求。
如果确实如此，我该如何修改我当前的代码以使其行为正确。也就是说，允许 jQuery 处理 post 请求。
任何输入表示赞赏。
这就是我所说的动态创建：
(1) 用户在当前 HTML 页面上提出请求：
<div id="pub1">
<a href="#" class="drop" id="one">Other</a>
<div id="displayselect">
<form id="select1" method="post">
<input type="hidden" name="All" value="1" />
<input type="submit" name="All" value="All Publishers" />
</form>
<form id="select2" method="post">
<input type="hidden" name="Current" value="1" />
<input type="submit" name="Current" value="Current Publishers" />
</form>
<form id="select3" method="post">
<input type="hidden" name="Users" value="1" />
<input type="submit" name="Users" value="User Priveleges" />
</form>
</div>
</div>
(2) 请求由 jQuery 处理 - 它将 post 请求发送到 php 页面，然后生成表（这是三个相同的 jQuery 函数之一）：
$(document).ready(function () {
$('#select3').submit(function (e) {
e.preventDefault();
$('#results').contents().remove();
var formData = $(this).serialize();
$("input").prop("disabled", true);
request = $.post('VRC_PublishersProcess.php', formData, resultsMessage);
request.fail(function() {
$('#results').append("<span id=\"reply\">Your search failed for an unknown reason. Please try again in a few minutes.</ span>");
$("input").prop("disabled", false); });
function resultsMessage(data) {
$('#results').append(data);
$("input").prop("disabled", false);
}
});
});
(3) 注意上面的jQuery函数是处理服务器反馈的。它在 id 的 div 中显示该反馈results。