为什么JQuery .hide()函数不能与Bootstrap Spinner一起使用? [英] Why doesn't JQuery .hide() function work with bootstrap spinner?

问题描述

服务器正在回答ajax查询时，我正在做一个简单的微调反馈.在进行ajax调用之前，我先调用JQuery .show()函数，并在请求的.always()回调中调用了.hide()函数.

I am doing a simple spinner feedback while my server answers an ajax query. I call the JQuery .show() function before making the ajax call and have the .hide() function called in the .always() callback of the request.

但是我的微调器永远不会隐藏！我不明白为什么...有人通过Bootstrap旋转器使用JQuery的.hide()功能遇到任何问题吗?

But my spinner never hides ! I don't understand why... has anybody encountered this problem using the .hide() function of JQuery with a Bootstrap spinner ?

有关.getJSON()的更多信息此处，有关.hide()和.show() 此处.

More info on .getJSON() here, more info on the .hide() and .show() here.

这是我的html微调框，来自此处

This is my html spinner, it commes from here

<div id="spinner-map-right-click" class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

这是我的javascript:

This is my javascript :

$('#spinner-map-right-click').show()
$.getJSON({ url: "myurl" })
    .done(function(data) {
        // does stuff here and it works
    })
    .fail(function(data) {
        // display error message if there is an error
    })
    .always(function(data) {
        console.log("Hiding")
        // the console log displays but my spinner is always ther :(
        $('#spinner-map-right-click').hide()
    });

该请求有效，我正确获取了数据，并且正确显示了"Hiding"，因此正确调用了always()回调，并且当我检查Firefix中的代码时，我发现<div>已被正确修改:

The request works, I get the data correctly and "Hiding" is displayed correctly so the always() callback is correctly called and when I inspect the code from Firefix I see the <div> has been correctly modified :

<div id="spinner-map-right-click" class="d-flex justify-content-center" style="display: none;">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

推荐答案

这是因为d-flex类.您可以尝试

It's because of d-flex class. You can try

$('#spinner-map-right-click').addClass('d-none') // removeClass('d-none')

通过 !important通过引导程序

d-flex 覆盖inline样式

d-flex by bootstrap using !important exception which override inline style

这篇关于为什么JQuery .hide()函数不能与Bootstrap Spinner一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！