Bootstrap Alert-先显示然后隐藏-无法再次显示 [英] Bootstrap Alert - show then hide - cannot show again

问题描述

我有一个简单的隐藏的可忽略的引导警报:

I have a simple hidden dismissible bootstrap alert:

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

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

A button is set to run a script that displays the hidden alert:

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

这在第一次显示警报时成功完成，但是如果用户关闭警报，则单击按钮显示警报不会再次显示警报.我以为:

This works successfully the first time to show the alert, but if the user closes the alert it won't display the alert again by clicking the button to show the alert. I assumed:

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

将始终显示警报吗?

推荐答案

引导文档指出:

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

(我的重点)

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

So that is why show() does not work the second time - because the element is no longer there.

因此，一种解决方案是删除data-dismiss="alert"属性并自己处理close事件.在下面的代码中，我在关闭按钮上添加了id，在原始代码中添加了另一个事件处理程序:

So a solution is to remove the data-dismiss="alert" attribute and handle the close event yourself. With the code below, I added an id to the close button and another event handler to your original code:

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-先显示然后隐藏-无法再次显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！