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

Answer 2

我发现解决方案是不使用表单提交事件，而是使用提交按钮的click事件。如果你像我一样，也想要禁用提交按钮以防止双重提交，则必须以编程方式提交表单，否则禁用提交按钮将阻止提交表单。您还需要在提交前引入一段短暂的延迟。我发现500毫秒有效，这对用户来说几乎没有明显的影响。这是我使用的代码

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;
};

将此行为应用于您需要执行的表单

$("#myform").preventDoubleSubmission;

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

2 个答案: