为什么JQuery .hide()函数不能与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