我的提醒信息有问题。它正常显示，我可以在用户按下x（关闭）时将其关闭，但是当用户再次尝试显示它时（例如，单击按钮事件），则不显示。 （此外，如果我将此警报消息打印到控制台，它等于[]。）我的代码在这里：
<div class="alert" style="display: none">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
事件：
$(".alert").show();
P.S！我需要在某些事件发生后显示警告信息（例如，点击按钮）。或者我做错了什么？
答案 0 :(得分：168)
Data-dismiss完全删除元素。改为使用jQuery的.hide（）方法。
快速修复方法：
使用内联javascript隐藏元素onclick如下：
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
但是，只有在你懒惰的情况下才能使用它（如果你想要一个可维护的应用程序，这不是好事。）
操作方法：
创建一个用于隐藏元素的新数据属性。
使用Javascript：
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
然后将数据关闭更改为数据隐藏在标记中。 Example at jsfiddle
$("." + $(this).attr("data-hide")).hide()
这将使用data-hide中指定的类隐藏所有元素，即：data-hide="alert"将使用警报类隐藏所有元素。
Xeon06提供了另一种解决方案：
$(this).closest("." + $(this).attr("data-hide")).hide()
这只会隐藏最接近的父元素。如果您不想为每个警报指定一个唯一的类，这非常有用。但请注意，您需要将关闭按钮置于警报范围内。
来自jquery doc的.closest的定义：
对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。
答案 1 :(得分：26)
我刚使用模型变量来显示/隐藏对话框并删除了data-dismiss="alert"
示例：
<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">×</button>
<strong>Error ! </strong>{{vm.exception}}
</div>
对我有用，并且不再需要去jquery
答案 2 :(得分：8)
我认为解决此问题的一个好方法是利用Bootstrap的close.bs.alert事件类型隐藏警报而不是删除它。 Bootstrap暴露此事件类型的原因是您可以覆盖从DOM中删除警报的默认行为。
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
答案 3 :(得分：5)
如果您正在使用MVVM库，例如knockout.js（我强烈推荐），您可以更干净地使用它：
<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
<button type="button" class="close" data-bind="click:function(){showAlert(false);}>
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
Warning! Better check yourself, you're not looking too good.
</div>
答案 4 :(得分：2)
因此，如果你想要一个可以处理动态html页面的解决方案，就像你已经包含它一样，你应该使用jQuery的live来为现在和将来在dom中的所有元素设置处理程序或者删除它。
我用
$(document).on("click", "[data-hide-closest]", function(e) {
e.preventDefault();
var $this = $(this);
$this.closest($this.attr("data-hide-closest")).hide();
});.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert {
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 20px;
padding: 15px;
}
.close {
color: #000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
<a class="close" data-hide-closest=".alert">×</a>
<strong>Success!</strong> Your entries were saved.
</div>
答案 5 :(得分：2)
这对我最好：
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
答案 6 :(得分：1)
我也遇到了这个问题，只是黑客关闭按钮的问题是我仍然需要访问标准的bootstrap alert-close事件。
我的解决方案是写一个small, customisable, jquery plugin注入一个正确形成的Bootstrap 3警报（有或没有关闭按钮，你需要它），最小的麻烦，让你在盒子关闭后轻松重新生成它
有关用法，测试和示例，请参阅https://github.com/davesag/jquery-bs3Alert。
答案 7 :(得分：1)
我同意Henrik Karlsson发布并由Martin Prikryl编辑的答案。基于可访问性，我有一个建议。我会在其末尾添加.attr（“aria-hidden”，“true”），以便它看起来像：
$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
答案 8 :(得分：0)
问题是由使用style="display:none"引起的，您应该使用Javascript隐藏警告，或者至少在显示时删除样式属性。
答案 9 :(得分：0)
基于其他答案和更改数据 - 关闭数据隐藏，此示例处理从链接打开警报并允许重复打开和关闭警报
$('a.show_alert').click(function() {
var $theAlert = $('.my_alert'); /* class on the alert */
$theAlert.css('display','block');
// set up the close event when the alert opens
$theAlert.find('a[data-hide]').click(function() {
$(this).parent().hide(); /* hide the alert */
});
});
答案 10 :(得分：0)
我已尝试过所有方法，对我来说最好的方法是使用内置的引导类.fade和.in
示例：
<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>
注意：在jQuery中，addClass（＆＃39; in＆＃39;）显示警告，removeClass（＆＃39; in＆＃39;）隐藏它。
有趣的事实：这适用于所有元素。不只是提醒。
答案 11 :(得分：0)
这是基于answer和Henrik Karlsson的解决方案，但具有适当的事件触发（基于Bootstrap sources）：
$(function(){
$('[data-hide]').on('click', function ___alert_hide(e) {
var $this = $(this)
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = $(selector === '#' ? [] : selector)
if (!$parent.length) {
$parent = $this.closest('.alert')
}
$parent.trigger(e = $.Event('close.bs.alert'))
if (e.isDefaultPrevented()) return
$parent.hide()
$parent.trigger($.Event('closed.bs.alert'))
})
});
主要是我的答案，作为笔记。
答案 12 :(得分：0)
以上所有解决方案都使用外部库（Angular或jQuery）以及旧版本的Bootstrap。因此，这是应用于 Bootstrap 4 的纯JavaScript 中的Charles Wyke-Smith解决方案。是的，Bootstrap需要使用jQuery作为自己的模式代码和警报代码，但并不是每个人都使用jQuery编写自己的代码。
以下是警报的html：
<div id="myAlert" style="display: none;"
class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-hide="alert">×</button>
<strong>Success!</strong> You did it!
</div>
请注意，最初警报是隐藏的（style="display: none;"），而不是标准的data-dismiss="alert"，我们在这里使用的是data-hide="alert"。
以下是显示警报并覆盖关闭按钮的JavaScript：
var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
myAlert.style.display = 'none';
});
如果您希望以编程方式在代码的其他位置隐藏或显示警报，只需执行myAlert.style.display = 'none';或myAlert.style.display = 'block';。
答案 13 :(得分：0)
不能简单地通过添加一个额外的“容器” div并每次将删除的警报div添加回去来做到这一点。似乎为我工作？
HTML
<div id="alert_container"></div>
JS
$("#alert_container").html('<div id="alert"></div>');
$("#alert").addClass("alert alert-info alert-dismissible");
$("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Info!</strong>message');