动态创建 Bootstrap CSS 警报消息

Question

我正在尝试使用用于 Bootstrap CSS 的 jQuery 插件动态创建警报消息。我想创建和销毁某些事件的警报（例如 AJAX 成功/错误）。这是我的代码的非工作 sn-p：

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>

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

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

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

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

Answer 2

您可以为警报动态添加 DOM 元素。

Javascript：

function addAlert(message) {
    $('#alerts').append(
        '<div class="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
            '&times;</button>' + message + '</div>');
}

function onError() {
    addAlert('Lost connection to server.');
}

HTML：

<div id="alerts"></div>

在多个警报的情况下，此版本将导致多个警报堆积，最终用户必须单独解除这些警报。根据您期望的警报数量以及用户查看每个警报的重要性，您可能希望修改此设置以删除旧警报。

此外，通过一些重构，您可以扩展它以创建除此错误警报之外的警告、信息和成功警报。