引导警报 - 显示然后隐藏 - 不能显示再次

我有一个简单的隐藏可取消引导警报：引导警报 - 显示然后隐藏 - 不能显示再次

<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();

会一直显示警报？

来源

2017-07-09 user982124

possibe这个[post]的副本（https://stackoverflow.com/questions/7676356/can-twitter-bootstrap-alerts-fade-in-as-well-as-out） – Charles

Bootstrap documentation警报指出：

只需添加数据驳回=“警报”，以关闭按钮，自动进行报警关闭功能。 关闭警报将其从DOM中删除。

（我的重点）

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

所以一个解决方案是删除data-dismiss="alert"属性并自己处理关闭事件。用下面的代码，我添加了一个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>

来源

2017-07-09 05:58:25

数据，拒绝来自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>

来源

2017-07-09 06:06:00

引导警报 - 显示然后隐藏 - 不能显示再次

回答

相关问题