Safari 浏览器未在 jquery 提交操作上激活 css 规则答案

【问题标题】：Safari not activating css rule on jquery submit actionSafari 浏览器未在 jquery 提交操作上激活 css 规则
【发布时间】：2014-12-11 11:18:27
【问题描述】：

我已经在网站上的表单提交上编写了列表。

$(".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 将在 body 上设置类，但不会激活 css 规则。

我做了一个测试按钮来测试覆盖。而且效果很好。

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

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

然后您就可以看到实际效果了。

【问题讨论】：

尝试取消提交事件并在稍有延迟后使用 JavaScript 提交。
我一开始就有这个想法，但没有找到提交表单的方法。那么该怎么做呢？
试试$(".movieSearch").submit(function(e) { e.preventDefault(); $("body").addClass("tmdbsearching"); var that = this; setTimeout(function(){ that.submit(); }, 1); });
成功了，谢谢。提交为答案，我将其设置为答案

标签： jquery css safari

【解决方案1】：

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

您可以按如下方式解决这种情况：

取消提交功能
向正文添加类
使用setTimeout()手动触发提交事件

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

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

【讨论】：