Question

我有一个简单的隐藏的可禁用引导警报：

＆＃13;

<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>

＆＃13;

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

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

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

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

会一直显示警告吗？

Answer 1

data-dismiss从HTML中删除Div，您必须像这样设置关闭按钮的操作

$('#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>

Answer 2

警告的

Bootstrap documentation表示：

只需在关闭按钮中添加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>

Bootstrap Alert - 显示然后隐藏 - 无法再显示

2 个答案: