jQuery $ ("# form"). FF 및 Chrome에서 작동하지 않음 (IE에서 작동 함)

Question

다른 곳에서 논의 된 동일한 문제가 발생했지만 지금까지 발견 한 수정 사항 중 아무 것도 내 문제를 해결하지 못했습니다. :

$ (# form) 안에 $ .post를 사용하고 있습니다. 양식을 AJAX를 통해 제출하면 사용자가 페이지를 떠나지 않습니다. 그것은 IE에서 멋지게 작동하지만, FF와 Chrome은 폼에 폼 필드 이름과 값을 가진 현재 페이지를 새로 고칩니다. 아마도 폼에 액션이 지정되지 않았기 때문일 것입니다. Internet Explorer에서 $ .post를 올바르게 수행하는 함수를 찾을 수 없기 때문에 IE에서 지정된 함수의 이름을 바꾸면 IE가 문제를 일으킬 수 있습니다. 또한 현재 페이지를 양식 필드 이름과 값으로 새로 고칩니다. querystring.

양식이 동적으로 만들어지며 한 번에 둘 이상의 양식을 볼 수 있도록 양식 이름에 임의의 숫자가 있어야합니다. 폼 이름이 항상 모든 브라우저에서 alert()에 올바르게 표시되기 때문에 문제의 일부라고 생각하지 않습니다.

function add_new_product(){ 

    var formName = "frm_add_new_product_" + window.random_number_for_IDs; 

    alert('this alert is BEFORE the (#formname).submit'); 

    $("#" + formName).submit(function(event) { 
     alert('this alert is inside the (#formname).submit BEFORE .preventDefault'); 
     event.preventDefault(); 
     alert('this alert is inside the (#formname).submit AFTER .preventDefault but BEFORE $.post'); 
     $.post("add_new_product.php?SiteID=<?php echo $_GET['SiteID']; ?>", $("#" + formName).serialize(), function(data){$("#DIV_new_product_name_" + window.random_number_for_IDs).html(data);}); 
     alert('this alert is inside the (#formname).submit AFTER $.post'); 
    }); 

    alert('this alert is AFTER the (#formname).submit'); 

    $("#DIV_new_product_form_" + window.random_number_for_IDs).fadeOut(100, function(){$("#DIV_new_product_name_" + window.random_number_for_IDs).fadeIn(100);}); 

} 

IE에서는 모든 알림()이 위에서 지정한 순서대로 표시되지 않습니다. $ (# form) .submit 전후의 것들을 먼저 표시 한 다음 안에있는 것들을 표시합니다. FF와 Chrome은 $ (# 양식). 제출 전후의 경고() 만 표시하지만 내부에는 절대 표시하지 않습니다.

Answer 1

는 고정 :

내가에서 양식의 onSubmit 변경 "add_new_product();" "javascript : add_new_product(); false를 반환합니다." preventDefault가 양식 제출의 "기본"조치를 "방지"하지 않았기 때문입니다. 그래서 폼 태그에 지정된 "액션"이 없었으며 preventDefault가 발생하지 않은 이유가 무엇이든간에 페이지가 쿼리 문자열의 필드 이름과 값으로 새로 고쳐집니다. 나는 또한 "허위 반환"을 시도했다. preventDefault를 주석 처리 한 후 함수 내부에 있지만 태그의 onSubmit에있을 때만 작동합니다.

그런 다음 동적 양식 이름, $ .post 줄, 및 페이드 아웃되고 아약스 응답이 사라지는 마지막 줄을 연결하는 첫 번째 줄을 제외하고 add_new_product() 스크립트의 모든 줄을 주석 처리했습니다. .html (데이터)을 통해 채우기.

세 브라우저 모두에서 작동합니다.