Динамическое создание предупреждающих сообщений Bootstrap CSS

Я пытаюсь динамически создавать предупреждающие сообщения, используя плагин jQuery для Bootstrap CSS. Я хочу создавать и уничтожать оповещения об определенных событиях (например, успех / ошибка 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?