关于javascript：Bootstrap Alert-先显示然后隐藏-无法再次显示

Bootstrap Alert - show then hide - cannot show again

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

1
2
3
4
5

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"></span></button>

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

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

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

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

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

将始终显示警报吗？

相关讨论

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

1
2
3

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

1
2
3
4
5
6
7
8
9

警报的引导程序文档指出：

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.

(我的重点)

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

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

1
2
3
4
5
6
7
8
9
10

let values = 'foo';

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

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

1
2
3
4
5
6
7
8
9
10