Why doesn't JQuery .hide() function work with bootstrap spinner?

问题

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.

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 ?

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

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>

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

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>

回答1:

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

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

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

回答2:

Here's my solution. It's only happening for the class d-flex. Because this class is containing a property display: flex !important;. Because of presence of !important exception, display: none; is not working (N.B. When you use .hide(), it assign display: none; to the element). That's why I removed the class d-flex and gave the element following style without !important exception. And now it's working.

#spinner-map-right-click {
  display: flex;
}

Codepen link

来源：https://stackoverflow.com/questions/57018812/why-doesnt-jquery-hide-function-work-with-bootstrap-spinner

标签

jquery

css

ajax

spinner