为什么 JQuery .hide() 函数不能与 bootstrap 微调器一起使用?
Why doesn't JQuery .hide() function work with bootstrap spinner?
当我的服务器回答 ajax 查询时,我正在做一个简单的微调器反馈。我在进行 ajax 调用之前调用了 JQuery .show()
函数,并在请求的 .always()
回调中调用了 .hide()
函数。
但我的微调器从不隐藏!我不明白为什么...有人在使用 JQuery 的 .hide()
函数和 Bootstrap 微调器时遇到过这个问题吗?
关于 .getJSON()
here, more info on the .hide()
and .show()
here 的更多信息。
这是我的 html 微调器,它来自 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 :
$('#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>
已正确修改:
<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
class。你可以试试
$('#spinner-map-right-click').addClass('d-none') // removeClass('d-none')
d-flex
由 bootstrap 使用 !important
异常覆盖 inline
样式
这是我的解决方案。它只发生在 class d-flex
。 因为这个 class 包含一个 属性 display: flex !important;
。由于存在 !important
异常,display: none;
不起作用 (N.B。当您使用 .hide() 时,它会将 display: none;
分配给元素) .这就是为什么我删除了 class d-flex
并在没有 !important
异常的情况下为元素提供了以下样式。现在它开始工作了。
#spinner-map-right-click {
display: flex;
}
当我的服务器回答 ajax 查询时,我正在做一个简单的微调器反馈。我在进行 ajax 调用之前调用了 JQuery .show()
函数,并在请求的 .always()
回调中调用了 .hide()
函数。
但我的微调器从不隐藏!我不明白为什么...有人在使用 JQuery 的 .hide()
函数和 Bootstrap 微调器时遇到过这个问题吗?
关于 .getJSON()
here, more info on the .hide()
and .show()
here 的更多信息。
这是我的 html 微调器,它来自 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 :
$('#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>
已正确修改:
<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
class。你可以试试
$('#spinner-map-right-click').addClass('d-none') // removeClass('d-none')
d-flex
由 bootstrap 使用 !important
异常覆盖 inline
样式
这是我的解决方案。它只发生在 class d-flex
。 因为这个 class 包含一个 属性 display: flex !important;
。由于存在 !important
异常,display: none;
不起作用 (N.B。当您使用 .hide() 时,它会将 display: none;
分配给元素) .这就是为什么我删除了 class d-flex
并在没有 !important
异常的情况下为元素提供了以下样式。现在它开始工作了。
#spinner-map-right-click {
display: flex;
}