Safari에서 양식을 제출 한 후 DOM에 스타일을 변경할 수 없습니다.

Question

Safari에서 양식을 제출 한 후 DOM에 스타일을 변경하는 데 문제가 있습니다. 누군가 가능한 아이디어라도 가지고 있습니까? Safari에서 예상되는 브라우저 동작입니까? 당신이 행동 문제를 볼 수 있도록 내가 아주 간단한 예를 설정 한

: http://jamesmichaelking.com/stackoverflow/safari/index.html

예는 입력 버튼을 찾습니다 이벤트를 제출 JQuery와 양식 자체에 HTML 양식을 게시 구성 배경을 빨간색으로 바꿉니다.

예 내가 예제의 HTML을, JS 및 CSS를 포함 시켰습니다

파이어 폭스와 크롬

에서 잘 작동합니다

HTML

<form action="index.html" method="post"> 
    <input type="submit" value="Submit me!"> 
</form> 

CSS

body { 
    font-family: sans-serif; 
    color: #fff;   
    text-align: center; 
} 

input { 
    border: none; 
    padding: 20px; 
    font-size: 20px; 
    background: #036; 
    color: #fff; 
} 

JQUERY

,210

$(function() { 

      $('form').on('submit', function() { 
       $(this).find('input').css('background', '#c00'); 
      }); 

     }); 

이상하게도, 나는 동일한 코드의 JSFiddle 만들었으며 그것을 잘 작동합니다 : http://jsfiddle.net/jamesking/q8WcV/

내가 맥에서 Safari 7을 사용하여 테스트하고 있습니다

많은

Answer 1

I 감사 어떤 도움 솔루션은 양식 전송 이벤트를 사용하지 말고 제출 버튼의 클릭 이벤트를 사용하는 것입니다. 만약 내가하는 것처럼 이중 제출을 막기 위해 제출 단추를 사용하지 않으려면 양식을 프로그래밍 방식으로 제출해야합니다. 그렇지 않으면 제출 단추를 사용 불가능으로 설정하면 양식이 제출되지 않습니다. 또한 제출하기 전에 짧은 지연을 도입해야합니다. 나는 500 밀리 초가 작동한다는 것을 발견했으며, 이것은 사용자에게 간신히 주목할 만하다. 이것은 당신이 A. 울프의 솔루션은 사파리 8.0.6

에 나를 위해 작동하지 않는 것처럼

$("#myform").preventDoubleSubmission; 

Answer 2

이 보이는 할 필요가 폼에이 동작을 적용하려면

jQuery.fn.preventDoubleSubmission = function() { 
    $form = $(this); 
    var submit_btn = $form.find(":submit"); 
    wait_msg = "One moment please" 
    submit_btn.on("click", function(e) { 
    var $subm = $(this); 
    var the_form = $subm.closest('form'); 
    $subm.attr("disabled", true); 
    $subm.val(wait_msg+" ..."); 
    setTimeout(function() { 
     the_form.submit(); 
    }, (100)); 
    }); 
    // Keep chainability 
    return this; 
}; 

를 사용하는 코드입니다

기본 제출 이벤트 처리기 (How to unbind a listener that is calling event.preventDefault() (using jQuery)?) 복원과 같은 다른 작업도 시도했지만 작동하지 않았습니다.

많은 테스트를 거친 끝에 해결책을 찾았습니다. 가장 깨끗한 것이 아닐지 모르지만 작동합니다.

var form = $("form"); 
form.on("submit", function (e) { 

    // Do your thing 

    e.preventDefault(); 

    setTimeout(function(){ 
     form.off("submit"); 
     form.find("input[type=submit], button[type=submit]").eq(0).click(); 
    }, 500); 
});