closures后，我的Bootstrap警报将不会显示

嗨，我有以下隐藏在页面上的警报

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden"> <button type="button" class="close" data-dismiss="alert">&times;</button> @TempData["selCode"] </div> 

我用下面的javascript显示它

  $('#send_reject_btn').click(function () { var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow'); if (selRowIds.length > 0) { $('#reject_alert').show(); } else { $('#selectCodeNotificationArea').show(); } }); 

这显然是链接到我的HTML中的button。

如果我使用<button type="button" class="close" data-dismiss="alert">&times;</button>closures它，则显示<button type="button" class="close" data-dismiss="alert">&times;</button>下一次按下button打开警报时，我可以请参阅$('#selectCodeNotificationArea').show(); 被调用我的debugging屏幕，但警报不会再次显示。

有谁之前经历过这个吗？

Answer 1

数据closures完成删除元素。 如果您打算再次显示，则需要隐藏警报。

例如;

 <div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden"> <button type="button" class="close" data-hide="alert">&times;</button> @TempData["selCode"] </div> 

和这个JS

 $(function(){ $("[data-hide]").on("click", function(){ $(this).closest("." + $(this).attr("data-hide")).hide(); }); }); 

Answer 2

更好的办法是从你的标签中删除data-dismiss="alert" ，并使用class name即close来隐藏并显示错误/警告。

 // WHEN CLOSE CLICK HIDE THE ERROR / WARNING . $(".close").live("click", function(e) { $("#add_item_err").hide(); }); // SOME EVENT TRIGGER IT. $("#add_item_err").show(); 

[我正在处理dynamic添加的元素，这就是为什么我使用'live'，您可能必须根据您的req来更改。]

Answer 3

Bootsrap $(selector).alert('close') （ http://getbootstrap.com/javascript/#alerts ）实际上删除警报元素，所以你不能再次显示它。 要实现所需的function，只需从closuresbuttondefintion中删除data-dismiss="alert"属性，并添加一些小事件处理程序来隐藏警报

 <div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden"> <button type="button" class="close alert-close">&times;</button> @TempData["selCode"] </div> <script> $(function() { $(document).on('click', '.alert-close', function() { $(this).parent().hide(); }) }); </script> 

Answer 4

我遇到了这个问题，上面打勾的解决scheme的问题是，我仍然需要访问标准的引导警报closures事件。

我的解决scheme是编写一个小的，可定制的jquery插件 ，以最小的麻烦注入一个正确形成的Bootstrap 3警报（有或没有closuresbutton），并允许您在closures该框后方便地重新生成警报。

有关使用，testing和示例，请参阅https://github.com/davesag/jquery-bs3Alert 。

Answer 5

其实bootstrap警报旨在被删除，而不是隐藏。 您可以通过查看警报消息来判断，它没有任何包装元素。 因此，任何尝试更改警报消息都需要额外的代码（查找文本节点元素）。 您应该重新devise您的应用程序，并在您每次愿意更改/再次显示时创build新的.alert元素。