title: Dynamically creating Bootstrap CSS alert messages
body: <p>I'm trying to dynamically create alert messages using the jQuery plugin for Bootstrap CSS. I want to create and destroy alerts on certain events (e.g. AJAX success/error). Here's a non-working snippet of my code:</p>
  
  <pre><code>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
      });
  };
  </code></pre>
  
  <p>and here's the corresponding HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="alert-message error fade in hide span16" data-alert="alert"&gt;
      &lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;
      &lt;p&gt;Lost connection to server.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My first problem is that the alert is showed by default. I can kinda solve this by using the <code>hide</code> class. However, if you close an alert (by clicking on the close button) then creating new asserts no longer works (I guess the DOM element is gone). How are you supposed to use Bootstrap alerts?</p>