Firefox에서 Ajax 후 이벤트 위임

다음은 jquery ajax를 통해 두 개의 양식을 제출하고 다시로드하는 예제 html, script 및 PHP입니다. 실제 응용 프로그램에서는 동일한 양식이 다시로드되지 않고 각 양식이 제출 된 후 일련의 양식이로드됩니다.Firefox에서 Ajax 후 이벤트 위임

크롬, IE 및 사파리; 의도 한 Ajax 요청의 결과 제출을 클릭하십시오. 서버가 의도 한대로 응답합니다. 결과 (모양에 대한 사후 변수 표시)와 새 양식이 의도 한대로 페이지에로드됩니다. 그런 다음 새 양식을 제출할 수 있으며 모두 좋다.

파이어 폭스에서; ajax를 통해로드 된 양식을 제출하려고 시도 할 때까지 모든 것이 의도 한대로 작동합니다. 그들은 제출하지 않을 것입니다. 원래 양식이 효과가 있습니다. 제출하지 않는 것은 ajax를 통해 추가 된 것입니다.

나는 이것이 ajax 이후에 firefox가 DOM을 업데이트하는 방법에 대한 "이벤트 위임"문제라고 생각합니다. http://api.jquery.com/on/ 및 기타 장소에서 설명서를 읽었으나 손실이 있습니다 ...

도움이나 의견을 크게 부탁드립니다! 내 목표는 크롬, IE, 사파리 및 파이어 폭스의 최신 버전에서이 기능을 사용하는 것입니다.

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); 
?>

출처

2011-12-26 Andy B

열기 방화범 DOM 관리자와 페이지와 양식이 실제로로드되었는지 확인합니다. 난 정말 당신이 테이블 요소 아래에 직접 양식 요소를 중첩 할 수 없다는 것을 확신합니다, 그리고 FF 단순히 가능성이 떨어지고 가능성이 높습니다. 일반적인 문제는 항상 깨진 HTML 때문입니다. HTML이 올바른지 확인하십시오. 로드 된 DOM이 예상 한 것과 같은지 확인하십시오.

Here은 HTML을 구문 분석하는 방법입니다. 예상대로 양식이 엉망이되었습니다.

출처

2011-12-26 16:22:29

확인. 제 생각 엔 여기 뉴비입니다. firbug에서 ajax 호출 후, DOM, window, htmlData, forms에서 html 형식이 예상대로 표시됩니다. 그것은 당신이 제안하고있는 것입니까? –

네, 그게 제가 제안하는 것입니다. 하지만 HTML이 올바르게 파싱되지 않습니다. 업데이트 된 답변보기 –

도움 주셔서 감사합니다! 나는 html로 작업하고 업데이트를 게시 할 것이다. –

Firefox에서 Ajax 후 이벤트 위임

답변

관련 문제