在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

我发现解决方案是不使用表单提交事件，而是使用提交按钮的单击事件。如果您和我一样，也想禁用提交按钮以防止重复提交，则必须以编程方式提交表单，否则禁用提交按钮将阻止提交表单。您还需要在提交之前引入短暂的延迟。我发现 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;