Safari没有激活jquery提交动作的css规则

我在网站上的表格上提交了脚本列表。

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

您可以看到，此脚本将在主体上设置一个类，然后将激活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

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

您可以按如下方式解决此问题：

• 取消提交function
• 将类添加到正文中
• 使用setTimeout()手动触发提交事件

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

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