引导警报 - 显示然后隐藏 - 无法再次显示答案

【问题标题】：Bootstrap Alert - show then hide - cannot show again引导警报 - 显示然后隐藏 - 无法再次显示
【发布时间】：2017-12-13 01:54:19
【问题描述】：

我有一个简单的隐藏可关闭引导警报：

<div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="selectedAssetsDetails"> </div>
</div>

<button type="button" id="getSelectedAssets" class="btn btn-primary">Show Selected Assets</button>

一个按钮被设置为运行一个显示隐藏警报的脚本：

$("#selectedAssetsDetails").html('Selected Assets: '+values);
$("#selectedAssets").show();

这在第一次显示警报时成功，但如果用户关闭警报，则不会通过单击显示警报的按钮再次显示警报。我假设：

$("#selectedAssets").show();

总是显示警报？

【问题讨论】：

可能是这个post的副本

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

Bootstrap documentation for alerts 声明：

只需将 data-dismiss="alert" 添加到您的关闭按钮即可自动提供警报关闭功能。 关闭警报会将其从 DOM 中删除。

（我的重点）

这就是为什么show() 第二次不起作用的原因 - 因为该元素不再存在。

所以一个解决办法是去掉data-dismiss="alert"属性，自己处理close事件。使用下面的代码，我在关闭按钮中添加了一个id，在您的原始代码中添加了另一个事件处理程序：

let values = 'foo';

$('#closeAlert1').on('click', function() {
  $("#selectedAssets").hide();  
});

$('#getSelectedAssets').on('click', function() {
  $("#selectedAssetsDetails").html('Selected Assets: '+values);
  $("#selectedAssets").show();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none">
  <button type="button" id="closeAlert1" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="selectedAssetsDetails"> </div>
</div>

<button type="button" id="getSelectedAssets" class="btn btn-primary">Show Selected Assets</button>

【讨论】：

【解决方案2】：

data-dismiss remove Div from HTML ，您必须像这样设置关闭按钮的操作

$('#getSelectedAssets').click(function() {
  $('#selectedAssets').show();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none">
  <button type="button" class="close" onclick="$('#selectedAssets').hide()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="selectedAssetsDetails">Alert </div>
</div>

<button type="button" id="getSelectedAssets" class="btn btn-primary">Show Selected Assets</button>

【讨论】：