jquery - Safari 不激活 jquery 提交操作的 css 规则

Question

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

$(".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

然后你就可以看到效果了。

Answer 1

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

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

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

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

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