无法在Safari中提交表单后对DOM进行样式更改 [英] Unable to make style changes to the DOM after form submit in Safari

问题描述

在Safari中提交表单后，我遇到了改变DOM的样式的问题。有没有人有任何想法，如果它甚至可能？这是Safari的预期浏览器行为吗？

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

该示例由一个html表单发布到自身，并带有一个jQuery表单提交事件，该事件查找输入按钮并将背景更改为红色。

这个例子在Firefox和Chrome中运行良好

我已经包含了html，js和css例如：

HTML

 < form action =index。 htmlmethod =post> 
< input type =submitvalue =提交我！> 
< / form> 
  

CSS

  body {
 font-family：sans-serif; 
颜色：#fff; 
 text-align：center; 
} 
 
 input {
 border：none; 
 padding：20px; 
 font-size：20px; 
背景：＃036; 
颜色：#fff; 
 
 $ / code> 

JQUERY



<$ p （'submit'，function（）{
$（this）.find（$'$'）$（$'$'$'$'$'$' （'input'）.css（'background'，'＃c00'）;
}）;

}）;


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

我在Mac上使用Safari 7进行测试

非常感谢任何帮助

解决方案

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

我还尝试了其他方法，例如恢复默认提交事件处理程序（如何解除调用event.preventDefault（）的侦听器（使用jQuery）？），但它不起作用。

经过大量测试后，我想出了一个解决方案。它可能不是最干净的，但它工作。

  var form = $（form）; 
 form.on（submit，function（e）{
 
 //做你的事情
 
 e.preventDefault（）; 
 
 setTimeout（function（）{
 form.off（submit）; 
 form.find（input [type = submit]，button [type = submit]）。eq（0） .click（）; 
}，500）; 
}）; 
  

I'm having problems making style alterations to the DOM after I submit a form in Safari. Does anyone have any idea if its even possible? Is this expected browser behavior from Safari?

I have set up a very simple example so you can see the issue in action: http://jamesmichaelking.com/stackoverflow/safari/index.html

The example consists of a html form posting to itself, with a jquery form submit event which looks for the input button and changes the background to red.

The example works fine in Firefox and Chrome

I've included the html, js and css from the example:

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

        });

Strangely, I have created a JSFiddle of the same code and it works fine: http://jsfiddle.net/jamesking/q8WcV/

I'm testing using Safari 7 on a mac

Any help much appreciated

解决方案

Looks like A. Wolff's solution doesn't work for me on Safari 8.0.6

I also tried other things like restoring the default submit event handler (How to unbind a listener that is calling event.preventDefault() (using jQuery)?), but it didn't work.

After a lot of testing, I came up with a solution. It might not be the cleanest one, but it's working.

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

这篇关于无法在Safari中提交表单后对DOM进行样式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！