Question

下面是通过jquery ajax提交和重新加载两个表单的示例html，脚本和php。在实际应用程序中，不会重新加载相同的表单，但会在每次表单提交后加载一系列表单。

在Chrome，IE和Safari中; 点击提交会产生预期的ajax请求。服务器按预期响应。结果（显示构象的后置变量）和新表单按预期加载到页面中。然后可以提交这些新表格并且一切都很好。

在Firefox中; 一切都按预期工作，直到您尝试提交通过ajax加载的表单。他们不会提交。原始表格确实有效。它只是通过ajax添加的，不提交。

我猜这是一个“事件委托”问题，firefox在ajax之后更新DOM的方式。我已经在http://api.jquery.com/on/和其他地方阅读了文档，但我不知所措......

任何帮助或建议将不胜感激！我的目标是在最新版本的chrome，IE，safari和firefox中实现这一功能。

带脚本的html页面

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Ajax Form Submit</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="results"></div>
<div id="forms">
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
    <td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
    <td class=""colspan="3"><h1>Form 1</h1></td>
</tr>
<tr>
    <td>Input 1A</td><td colspan="2"><input type="text" name="1A"  /></td>
</tr>
<tr>
    <td colspan="3"><input type="hidden" name="1B" value="Form 1 was submitted" /></td>
</tr>
<tr>
    <td colspan="3"><button type="submit" >Click Me!</button><input type="submit" value="Submit Form 1" /></td>
</tr>
</form>
</table>
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
    <td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
    <td class=""colspan="3"><h1>Form 2</h1></td>
</tr>
<tr>
    <td>Input 2A</td><td colspan="2"><input type="text" name="2A"  /></td>
</tr>
<tr>
    <td colspan="3"><input type="hidden" name="2B" value="Form 2 was submitted" /></td>
</tr>
<tr>
    <td colspan="3"><input type="submit" value="Submit Form 2" /></td>
</tr>
</form>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#forms").on("submit", "form", function(e) {
e.preventDefault();
$.ajax({
    url: "testAjax.php",
    type: "POST",
    cache: false,
    data: $(this).serializeArray(),
    success: function(jsonData) {
        htmlData = jQuery.parseJSON(jsonData);
        $.each(htmlData, function(id, data){
            $("#"+id).html(data);
        });
    },
    error: function(jqXHR, textStatus, errorThrown){
        $("#results").html("<p>Somthing went wrong!</p>");
    }
});
});
});
</script>
</body>
</html>

testAjax.php

<?php
$htmlOutput['forms'] = 
'<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form id="login" method="post" enctype="multipart/form-data" target="_self" action="_self">
<tr>
    <td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
    <td class=""colspan="3"><h1>Form 1</h1></td>
</tr>
<tr>
    <td>Input 1A</td><td colspan="2"><input type="text" name="1A"  /></td>
</tr>
<tr>
    <td colspan="3"><input type="hidden" name="1B" value="Form 1 was submitted" /></td>
</tr>
<tr>
    <td colspan="3"><button type="submit" >Click Me!</button><input type="submit" value="Submit Form 1" /></td>
</tr>
</form>
</table>
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
    <td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
    <td class=""colspan="3"><h1>Form 2</h1></td>
</tr>
<tr>
    <td>Input 2A</td><td colspan="2"><input type="text" name="2A"  /></td>
</tr>
<tr>
    <td colspan="3"><input type="hidden" name="2B" value="Form 2 was submitted" /></td>
</tr>
<tr>
    <td colspan="3"><input type="submit" value="Submit Form 2" /></td>
</tr>
</form>
</table>
</div>';
$htmlOutput['results'] =
'<p>Form 1:<br> 1A = ' . $_POST['1A'] . '<br>1B = ' . $_POST['1B'] . '</p>' .
'<p>Form 2:<br> 2A = ' . $_POST['2A'] . '<br>2B = ' . $_POST['2B'] . '</p>';
echo json_encode($htmlOutput);
?>

Answer 1

打开Firebug DOM检查器并验证您的表单确实已加载。我很确定你不允许直接在表元素下嵌套表单元素，FF可能只是简单地删除它。一般来说，像这样的问题总是由于HTML破坏。验证您的HTML是否正确。验证加载的DOM是否符合预期。

Here是您的HTML解析方式。正如预期的那样，形式已被破坏。

在Ajax之后的Firefox中的事件委托

1 个答案: