Safari没有激活jquery提交操作的css规则 [英] Safari not activating css rule on jquery submit action

问题描述

  $（movieSearch） .submit（function（）{
 $（body）。addClass（tmdbsearching）; 
}）; 
  

这个脚本可以看到，将在body上设置一个类，然后激活css重叠

  div.overlay {
 position：fixed; 
 z-index：900; 
 top：0px; 
 left：0px; 
 width：100％; 
 height：100％; 
 background-color：rgba（0,0,0,0.4）; 
 
 opacity：0; 
 visibility：hidden; 
 
 -webkit-transition：opacity 0.5s cubic-bezier（0.89，.005，.545,1）; 
 -moz-transition：opacity 0.5s cubic-bezier（0.89，.005，.545,1）; 
 -ms-transition：opacity 0.5s cubic-bezier（0.89，.005，.545,1）; 
 -o-transition：opacity 0.5s cubic-bezier（0.89，.005，.545,1）; 
 transition：opacity 0.5s cubic-bezier（0.89，.005，.545,1）; 
} 
 
 body.tmdbsearching div.overlay {
 z-index：900; 
 opacity：1！important; 
 visibility：visible！important; 
} 
  

但这个不工作的Safari不会显示叠加。所有其他浏览器它的工作。我可以safari将设置类的身体，但不会激活css规则。

我做了一个测试按钮，测试覆盖。这个工作正常。

  $（'。testbutton'）click（function（）{
 $ body）。toggleClass（tmdbsearching）; 
}）; 
  

链接到网站是： http://moovee.dk/beta/index.php/tilfoj-film

解决方案

您正在向submit函数中添加类，并将表单触发器导航到另一个页面。在这种情况下，浏览器可能会或可能不会选择更新显示。

您可以解决此情况，如下所示：

• 取消提交功能


• 向身体添加类


• 使用 setTimeout（）

  $（。movieSearch）。submit（function（e）{
 e.preventDefault（）; 
 $（body）。addClass（tmdbsearching）; 
 var that = this; 
 setTimeout（function（）{
 that.submit（）; 
}，1）; 
}）; 
 

在上面的例子中，提交处理程序取消了事件并返回控制给浏览器，允许它更新显示。

I have i script theres listing on the submit off the form on the site.

$(".movieSearch").submit(function() {
    $("body").addClass("tmdbsearching");
});

This script as you can see, will set a class on the body wich then will activate a css overlay rule.

div.overlay {
position: fixed;
z-index: 900;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);

opacity: 0;
visibility: hidden;

-webkit-transition: opacity 0.5s cubic-bezier(0.89,.005,.545,1);
   -moz-transition: opacity 0.5s cubic-bezier(0.89,.005,.545,1);
    -ms-transition: opacity 0.5s cubic-bezier(0.89,.005,.545,1);
     -o-transition: opacity 0.5s cubic-bezier(0.89,.005,.545,1);
        transition: opacity 0.5s cubic-bezier(0.89,.005,.545,1);
}

body.tmdbsearching div.overlay {
z-index: 900;
opacity: 1 !important;
visibility: visible !important;
}

But this donst work Safari will not show the overlay. All other browser it works in. I can safari will set the class on the body, but will not activate the css rule.

i made a test button, to test the overlay. And that works fine.

$('.testbutton').click(function() {
    $("body").toggleClass("tmdbsearching");
});

the link to the site is: http://moovee.dk/beta/index.php/tilfoj-film

then you can see in action.

解决方案

You are adding class inside the submit function and submitting the form triggers navigation to another page. In this case, the browser may or may not choose to update the display.

You can workaround this situation as follows:

• Cancel the submit function
• Add class to the body
• Trigger the submit event manually using setTimeout()

$(".movieSearch").submit(function(e) {
    e.preventDefault();
    $("body").addClass("tmdbsearching");
    var that = this;
    setTimeout(function() {
        that.submit();
    }, 1);
});

In the above example, the submit handler cancels the event and return control to the browser, allowing it to update the display.

这篇关于Safari没有激活jquery提交操作的css规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！