javascript - 动态创建 Bootstrap CSS 警报消息

Question

我正在尝试使用 Bootstrap CSS 的 jQuery 插件动态创建警报消息。我想创建和销毁某些事件的警报(例如 AJAX 成功/错误)。这是我的代码的一个无效片段:

var alertVisible = false;
function fetchData() {
    function onDataReceived(stats) {
        if (alertVisible) {
            $(".alert-message").alert("close");
        }
        alertVisible = false;
        // Do stuff with data...
    }

    function onError() {
        $(".alert-message").alert();
        alertVisible = true;
    }

    $.ajax({
        dataType: 'json',
        success: onDataReceived,
        error: onError,
        cache: false
    });
};

这是相应的 HTML:

<div class="row">
  <div class="alert-message error fade in hide span16" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>Lost connection to server.</p>
  </div>
</div>

我的第一个问题是默认显示警报。我可以通过使用 hide 类来解决这个问题。但是，如果您关闭警报(通过单击关闭按钮)，那么创建新的断言将不再有效(我猜 DOM 元素已经消失)。您应该如何使用 Bootstrap 警报？

Answer 1

这个答案指的是 Bootstrap 2。

当警报关闭时，它会从 DOM 中移除。

如果您希望警报稍后重新出现，请确保不将 data-dismiss="alert" 放在关闭按钮中，如下所示:

<div class="alert fade in" id="login-error" style="display:none;">
    <button type="button" class="close">×</button>
    Your error message goes here...
</div>

然后，绑定(bind)关闭按钮以在按下时简单地隐藏警报:

$('.alert .close').on('click', function(e) {
    $(this).parent().hide();
});

当您希望工具提示重新出现时，只需显示它即可。

$('#login-error').show();