jquery .show（）和.hide（）在safari中不起作用 – 将微调器添加到<a href
我有一些非常基本的代码，充当网页的加载GIF：
加载和内容容器位于我的基本模板中。 该
//header Home //more html 
{% block content %}{% endblock %} function spinner() { console.log('fire'); $("#loading").show(); $("#content").hide(); } div#loading { height: 350px; position: relative; display: none; background: white; } .ajax-loader { position: absolute; left: 0; top: 0; right: 0; bottom: 0; max-width: 100px; margin: auto; }
我的代码在firefox和chrome中运行得非常好，但在safari或ios中却没有。
PS。 我已经检查过我的function是否正常，控制台显示’fire’，我在onclick（）之后直接打印。
编辑
这是控制台中唯一的错误：
[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (jquery-ui.min.css, line 0)
更新1
我在<a href="https://stackoverflow.com/questions/40365553/jquery-show-and-hide-not-working-in-safari-adding-spinner-to-a-href/url" class="..."添加了一个类，并将我的javascript更新为以下内容：
$(function() { $( ".spin_click" ).click(function( event ) { event.preventDefault(); console.log('hiding content'); $(".content").hide(); console.log('show spinner'); $(".se-pre-con").show(); console.log('waiting now...'); }); }); #html {% block content %}{% endblock %}
当我点击链接时，我可以通过safari来显示se-pre-con div，但它会完全禁用href链接。 是否可以在jquery中执行链接点击并执行.show（）命令？ 也许我误解了preventDefault(); – 但我认为它可以作为一种解决方法。 这个问题仍然只存在于safari中
更新2
正如@maximast所建议的那样，我决定使用addClass和removeClass。 像往常一样，它适用于chrome和firefox，但不适用于safari。 代码是一样的，我刚刚添加了一个hide类，必要时添加和删除。
如果我使用safari检查器并手动删除hide类， 则微调器会显示 。 当我点击页面中的链接来触发jquery函数时，我可以看到从div正确删除了hide类。 但是，即使删除了hide类，也不会出现微调器。 也许我错过了一些明显的东西。
这是我正在使用的库：
更新3
这是测试页面的链接。 有一个链接可以让应用程序hibernate3秒，为旋转器提供足够的时间来触发。 旋转器位于徽标中。 测试页面将显示微调器在Chrome和Firefox中工作，但不会显示Safari。 使用此按钮的实现与我的应用程序中的其他位置完全相同。
http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test
我已将徽标中的链接更改为： <a href='#' ，这是第一次在所有三个浏览器中渲染微调器。 （进展！）。 但是，当您单击“单击以触发微调器”时。 链接，发生以下情况：
- Chrome – 微调器第一次工作。
- Firefox – spinner第一次工作，但有几次我不得不再次点击它。
- Safari – 没有运气。
以下是管理spinner-test页面的烧瓶代码：
@app.route('/spinner-test', methods=['GET']) def spinner(): return render_template('spinner-test.html') @app.route('/wait', methods=['GET']) def wait(): time.sleep(3) return redirect(https://stackoverflow.com/questions/40365553/jquery-show-and-hide-not-working-in-safari-adding-spinner-to-a-href/url_for('spinner'))
我无法使用提供的代码重现该问题。 但是，我正在为您想要完成的简单版本添加答案。
我的猜测是，未提供的代码比您描述的更复杂（或者缺少某些依赖项）。
由于您已经在使用jQuery，我也会使用该库给您答案。
（ 更新 ：添加了OP使用的其他库，以测试它们的存在是否引入了所描述的问题）
请参阅以下示例代码：
$(function() { // add event listener to home (class) - // used instead of inline binding using 'onclick' $('.home').on('click', function() { console.log('show spinner'); // show spinner right away $("#loading").show(); console.log('waiting now...'); // simulate delay in fetching backend response (delay is 3 secs) // contains the callback function to be invoked after your response is completed setTimeout(function() { // hide spinner console.log('hide spinner'); $("#loading").hide(); // show content console.log('show content'); $("#content").show(); }, 3 * 1000); // time is in ms so 1000ms = 1 sec (3*1000=3secs) }); });
div#loading { height: 50px; position: relative; display: none; background: white; } .ajax-loader { position: absolute; left: 0; top: 0; right: 0; bottom: 0; max-width: 100px; margin: auto; } #content { display: none; }
Header here
Home 
content will be loaded here
看来你的函数名为spinner ，但是你试图在你a标签中onclick="javascript:loading(); （ onclick="javascript:loading(); ）。将你的函数名改为loading应该修复它。
这是一个有效的例子：
https://jsfiddle.net/nvzge1e8/5/
编辑更新的问题：
您需要阻止该事件，如果您在函数顶部粘贴event.preventDefault() ，它应该播放动画。 请注意，这样做会阻止您的链接实际将您的用户发送到该页面，因此您可能需要将定时重定向添加到您发送给他们的任何页面。
示例代码：
$(function() { $(".spin_click").click(function(event) { event.preventDefault() $("#logo_spinner").attr("src", "/static/images/loaders/spinner.gif"); $('.content').addClass('hide'); setTimeout(function() { window.location.href = "/wait"; }, 4000); }); });
我没有在Safari中测试过这个，但你可以试试
$("#loading").fadeIn(0); $("#content").fadeOut(0);
但一定要删除
display: none
来自你的CSS
而不是$('elem').show()和$('elem').hide()尝试使用…
$('elem').attr( 'data-display', 'block'); $('elem').attr( 'data-display', 'none');
在CSS中添加…
属性选择器使用两次以增加特异性;）
[data-display][data-display='none'] { display:none!important; } [data-display][data-display='block'] { display:block!important; }
代码看起来像这样……
$('h1').attr( 'data-display', 'block'); $('h2').attr( 'data-display', 'none');
[data-display][data-display='none'] { display:none!important; } [data-display][data-display='block'] { display:block!important; }
I'm displayed
I'm hidden
I'm unaffected ;)
抱歉没有尝试过再现你的bug，除非你必须使用elem.hide()和elem.show() 。
或者，您可以使用addClass和removeClass函数
$('#loading').addClass('hide'); $('#loading').removeClass('hide');
with .hide { display: none; } .hide { display: none; }
在safari也很完美。