jquery .show（）和.hide（）不能在safari中工作 - 将微调添加到< a href [英] jquery .show() and .hide() not working in safari - adding spinner to <a href

问题描述

我有一些非常基本的代码，可以作为一个网页的加载gif：

加载和内容容器位于我的基本模板中。

---

  //标题
 
  
 //更多html 
 
< div id =loading> 
< img src =/ static / images / Loading.gifclass =ajax-loader> 
< / div> 
 
< div id =content> 
 
 {％block content％} {％endblock％} 
 
< / div> 
 
< script type =text / javascript> 
函数微调（）{
 console.log（'fire'）; 
 $（＃loading）。show（）; 
 $（＃content）。hide（）; 
} 
< / script> 
  

---

  div #loading {
 height：350px; 
 position：relative; 
 display：none; 
背景：白色; 
} 
 
 .ajax-loader {
 position：absolute; 
剩下：0; 
 top：0; 
 right：0; 
 bottom：0; 
 max-width：100px; 
 margin：auto; 
 
 $ / code> 

我的代码在firefox和chrome中运行得非常好， IOS。



ps。我已检查，我的功能正在工作，控制台显示火，我直接打印onclick（）后。

$ b

编辑

这是控制台中唯一的错误：

[Error]加载资源失败：服务器响应状态为404（未找到）（jquery-ui.min.css，第0行）


更新1



类到我的< a href =urlclass =...并更新了我的javascript到以下内容：



 < script type =text / javascript> 
 $（函数（）。
 $（.spin_click）.click（函数（事件）{
 event.preventDefault（）; 
 console.log（'隐藏内容'）; 
 $（。content）。hide（）; 
 console.log（'show spinner'）; 
 $（。se-pre-con）。 （）; 
 console.log（'waiting now ...'）; 
}）; 
}）; 
< / script> 
 
 #html 
 
< div class =se-pre-con>< / div> 
< div class =content> 
 
 {％block content％} {％endblock％} 
< / div> 
  

我可以让safari显示 se-pre-con div当我点击一个链接，但是它完全禁用href链接。是否有可能追求在jQuery中执行.show（）命令的链接点击？也许我误解了 preventDefault（）; - 但我认为这可能是一个解决方法。 问题仍然存在于Safari浏览器中



更新2

正如@maximast所建议的那样，我决定使用addClass和removeClass。像往常一样，它在铬和Firefox的作​​品，但不safari。代码是一样的，我刚刚添加了一个 hide 类，根据需要添加和删除。

如果我使用Safari浏览器并手动删除隐藏类，微调器确实显示。当我点击页面中的一个链接来触发jquery函数时，我可以看到 hide 类从 div 。但是，即使 hide 类被删除，微调框也不会出现。也许我在这里错过了一些明显的东西

以下是我正在使用的库：

 <脚本SRC = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< /脚本> 
< script src =https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js>< / script> 
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js>< /脚本> 
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js>< /脚本> 
  

更新3

这是一个测试页面的链接。有一个链接，让应用程序睡3秒给予微调器触发足够的时间。纺纱工坐在标志。测试页面将显示微调工作在Chrome和Firefox中，但不是Safari浏览器。这个按钮的实现与我的应用程序中的其他地方完全一样。

http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test

我改变了在标识中的链接：< a href ='＃'这是第一次在所有三个浏览器中渲染微调器。 （进展！）。但是，当您点击点击触发微调链接时，会发生以下情况：

1. Chrome浏览器第一次运行。


2. Firefox第一次使用spinner，不过有几次我不得不再次点击它。
   
3. Safari - 没有运气。
   




以下是使用spinner-测试页：

$ $ p $ @ 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（url_for（'spinner'））





解决方案

看来你的函数名为 spinner ，但是你正在尝试在 a 标签（ onclick =javascript：loading（））中激发 loading（） ; ）。将你的函数名改为 loading 应该可以解决它。





工作示例：



https://jsfiddle.net / nvzge1e8 / 5 /





编辑更新的问题：





如果你在函数的顶部粘贴 event.preventDefault（），你需要防止事件发生动画。请注意，这样做会阻止您的链接实际上将您的用户发送到页面，所以您可能需要添加定时重定向到您要发送给他们的任何页面。





示例代码：

$ $ $ $ $（。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）;

}）;
}）;





I have some very basic code that acts as a loading gif for a webpage:

The loading and content containers sit in my base template. The

---

//header

<a href="{{ url_for('welcome', id=id, profile=profile) }}" onclick="spinner();" class="home">Home</a>

//more html

<div id="loading">
    <img src="/static/images/Loading.gif" class="ajax-loader">
</div>

<div id="content">

    {% block content %}{% endblock %}

</div>

<script type="text/javascript">
    function spinner() {
        console.log('fire');
        $("#loading").show();
        $("#content").hide();
    }
</script>

---

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;
}

My code works perfectly well in firefox and chrome, but not in safari or on ios.

ps. I have checked that my function is working, the console shows 'fire' which i print straight after the onclick().

Edit

This is the only error in the console:

[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (jquery-ui.min.css, line 0)

Update 1

I have added a class to my <a href="url" class="..." and updated my javascript to the following:

<script type="text/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...');
        });
    });
</script>

#html

<div class="se-pre-con"></div>
    <div class="content">

        {% block content %}{% endblock %}
    </div>

I can get safari to show the se-pre-condiv when I click on a link, however it completely disables the href link. Is it possible to pursue the link click having executed the .show() command in the jquery? Perhaps I have misunderstood preventDefault(); - but I thought it might be able to act as a workaround. The issue still only exists in safari

Update 2

As suggested by @maximast, I have decided to use addClass and removeClass. As usual it works in chrome and firefox, but not safari. The code is the same, I have just added a hide class which is added and removed as necessary.

If I use the safari inspector and remove the hide class manually, the spinner does show up. When I click on a link in the page to trigger the jquery function, I can see the hide class removed correctly from the div. However, even though the hide class is removed, the spinner does not appear. Perhaps I am missing something obvious here.

Here are the libraries i am using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>

Update 3

Here is a link to a test page. There is a link which puts the app to sleep for 3 seconds giving enough time for the spinner to trigger. The spinner sits in the logo. The test page will show the spinner working in a Chrome and Firefox, but not safari. The implementation with this button is exactly the same as used elsewhere in my app.

http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test

I have changed the link in the logo to: <a href='#' which for the first time render the spinner in all three browsers. (progress!). However when you click on the 'Click to trigger spinner.' link, the following happens:

1. Chrome - spinner works first time.
2. Firefox - spinner works first time, however there were a couple of occasions when I had to click it a second time.
3. Safari - no luck.

Here is the flask code with the managing the spinner-test page:

@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(url_for('spinner'))

解决方案

It appears that you function is named spinner, yet you're attempting to fire loading() inside your a tag (onclick="javascript:loading();). Changing your function name to loading should fix it.

Here's a working example:

https://jsfiddle.net/nvzge1e8/5/

Edit for updated question:

You need to prevent the event, if you stick event.preventDefault() at the top of your function, it should play the animation. Do note, doing this will prevent your link from actually sending your user to the page, so you may need to add a timed redirect to whatever page you're sending them to.

Example code:

 $(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);

 });
});

这篇关于jquery .show（）和.hide（）不能在safari中工作 - 将微调添加到< a href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！