jquery - 在 Safari 中提交表单后无法对 DOM 进行样式更改

Question

在 Safari 中提交表单后，我在对 DOM 进行样式更改时遇到问题。有没有人知道它是否可能？这是 Safari 的预期浏览器行为吗？

我已经设置了一个非常简单的示例，因此您可以看到实际的问题: http://jamesmichaelking.com/stackoverflow/safari/index.html

该示例包含一个发送到自身的 html 表单，以及一个查找输入按钮并将背景更改为红色的 jquery 表单提交事件。

该示例在 Firefox 和 Chrome 中运行良好

我已经包含了示例中的 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

$(function() {

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

        });

奇怪的是，我创建了一个相同代码的 JSFiddle，它工作正常: http://jsfiddle.net/jamesking/q8WcV/

我正在 mac 上使用 Safari 7 进行测试

非常感谢任何帮助

Answer 1

看起来 A. Wolff 的解决方案在 Safari 8.0.6 上对我不起作用

我还尝试了其他方法，例如恢复默认的提交事件处理程序 ( 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);
});