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

【问题标题】：Unable to make style changes to the DOM after form submit in Safari在 Safari 中提交表单后无法对 DOM 进行样式更改
【发布时间】：2014-03-29 09:43:42
【问题描述】：

在 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 进行测试

非常感谢任何帮助

【问题讨论】：

它确实有效。问题是样式的更改将被页面重新加载删除。您可以附加 event.preventDefault(); 以阻止按钮提交。但是表格也不会提交。您必须通过 ajax 提交表单，或者附加一个 get 参数，如 ?submited=true，如果您在请求中找到此参数，则设置按钮样式。
看起来只是 Safari 没有及时重绘 UI，因为重定向。您可以使用像这里这样的超时来测试它：jsfiddle.net/q8WcV/3
Nico O - 我很欣赏页面重新加载时样式将被重置，但我确实希望按钮在表单提交完成之前闪烁红色 - 它在 Safari 中不会这样做，但在所有其他浏览器中都不会这样做它确实
我的问题类似，只是我自己提交表单。就在提交之前，我正在向一个元素添加类以通知用户提交正在进行中。只有 Mac 上的 Safari 在提交时忽略了这个新类。所以我在添加类后添加了虚拟动画，它可以工作： $(".logo").addClass("rotate").animate({ left: "+=0" }, 100 );
我在使用 Safari 时遇到了完全相同的问题：没有考虑任何更改，包括禁用提交按钮。这一定是时间问题，因为当我的机器在备份期间负载很重时，它有时会工作。我尝试了 A. Wolff 的解决方案，但由于使用 preventDefault 禁用了超时后提交的表单，因此无法正常工作。我还尝试了 Vladimir 的解决方案，它在 30% 的情况下有所帮助（有时只需重新提交相同的表单即可更改 DOM）。如果我在返回之前插入警报，它将始终有效（但不用说，这不是解决方案）。

标签： jquery html css dom safari

【解决方案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);
});

【讨论】：

【解决方案2】：

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

【讨论】：

您的解决方案有 2 个问题：1）如果您在文本字段中提交表单并点击返回，则它不起作用（在这种情况下，只会触发表单的提交事件）2）您调用方法需要加括号，如：$("#myform").preventDoubleSubmission();否则它根本不起作用。