jquery .show()和.hide()无法在safari中工作 - 将微调器添加到<a href

Question

我有一些非常基本的代码,充当网页的加载GIF:

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

---

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

我的代码在firefox和chrome中运行得非常好,但在safari或ios上却没有.

PS.我已经检查过我的功能正在运行,控制台显示'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="url" class="..."并将我的javascript更新为以下内容:

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

se-pre-con当我点击一个链接时,我可以通过safari来显示div,但它会完全禁用href链接.是否可以在jquery中执行链接点击并执行.show()命令？也许我误解了preventDefault();- 但我认为它可以作为一种解决方法.这个问题仍然只存在于safari中

更新2

正如@maximast所建议的那样,我决定使用addClass和removeClass.像往常一样,它适用于chrome和firefox,但不适用于safari.代码是一样的,我刚刚添加了一个hide类,根据需要添加和删除.

如果我使用safari检查器并手动删除隐藏类,则微调器会显示.当我点击页面中的一个链接来触发jquery函数时,我可以看到hide该类正确删除了div.但是,即使hide删除了类,也不会出现微调器.也许我错过了一些明显的东西.

这是我正在使用的库:

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

更新3

这是测试页面的链接.有一个链接可以让应用程序休眠3秒,为旋转器提供足够的时间来触发.旋转器位于徽标中.测试页面将显示微调器在Chrome和Firefox中工作,但不会显示.使用此按钮的实现与我的应用程序中的其他位置使用的完全相同.

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

我已将徽标中的链接更改为:<a href='#'这是第一次在所有三个浏览器中呈现微调器.(进展!).但是,当您单击"单击以触发微调器"时.链接,发生以下情况:

1. Chrome - 微调器第一次工作.
2. Firefox - spinner第一次工作,但有几次我不得不第二次点击它.
3. 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(url_for('spinner'))

Answer 1

我还没有在 Safari 中测试过这个，但你可以尝试一下

$("#loading").fadeIn(0);
$("#content").fadeOut(0);

但请务必删除

display: none

来自你的CSS