关闭后,我的Bootstrap警报不会显示

Question

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

<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 type="button" class="close" data-dismiss="alert">&times;</button>下次关闭它.下次按下按钮打开警报我可以看到$('#selectCodeNotificationArea').show();在我的调试屏幕中调用,但警报不再显示.

有谁之前经历过这个吗？

Answer 1

Data-dismiss completley删除元素.如果您打算再次显示警报,则需要隐藏警报.

例如;

<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"从您的标签中删除,并使用类名,即接近隐藏并显示错误/警告.

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

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[我正在研究动态添加的元素,这就是我使用'live'的原因,你可能需要根据你的需求进行更改.]

Answer 3

Bootsrap $(selector).alert('close')(http://getbootstrap.com/javascript/#alerts)实际上删除了警报元素,因此您无法再次显示它.要实现所需的功能,只需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>