0
以下は、jquery ajaxを使用して2つのフォームを提出して再読み込みするhtml、script、phpの例です。実際のアプリケーションでは、同じフォームは再ロードされませんが、各フォームの送信後に一連のフォームがロードされます。Ajaxの後のFirefoxでのイベント委任
クロム、IEおよびサファリで、目的のAjaxリクエストで結果を送信するをクリックします。サーバーは意図したとおりに応答します。結果（コンフォメーションのポスト変数を示す）と新しいフォームが意図したとおりにページにロードされます。これらの新しい書式を提出することができ、すべてが良好です。
firefox; ajaxを介してロードされたフォームを送信しようとするまで、すべてが意図どおりに機能します。彼らは提出しません。元のフォームが機能します。これは、提出しないajax経由で追加されたものだけです。
これは、ajaxの後にfirefoxが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);
?>
okです。私はここで初心者です。 firbugでは、ajax呼び出しの後、DOM、window、htmlData、formsの下にhtmlという形式が期待どおりに表示されます。それはあなたが示唆していることですか？ –
はい、それは私が示唆しているものです。しかし、私はあなたのHTMLが正しく解析されているのを見ていません。更新された回答をご覧ください。 –
ご協力ありがとうございます！私はhtmlで作業し、アップデートを投稿します。 –