title: How to trigger event more than once for one page applications
body: <p>The application communicates via socket.io to our Node.js server. On client side, there is Tweeter Bootstrap message section as follows:</p>
  
  <pre><code>&lt;div id="message-section"&gt;
      &lt;div class="alert alert-block"&gt;
           &lt;button type="button" class="close" data-dismiss="alert"&gt;×&lt;/button&gt;
           &lt;span&gt;here comes message received from server and attached via Jquery .append()&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, when user clicks to close this message, Twitter Bootstrap Js library removes the whole section of:</p>
  
  <pre><code> &lt;div class="alert alert-block"&gt;
               &lt;button type="button" class="close" data-dismiss="alert"&gt;×&lt;/button&gt;
               &lt;span&gt;here comes message received from server and attached via Jquery .append()&lt;/span&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Next message comes, i cannot use $('.alert').append() to attach the new message because the DOM element is not there anymore. To solve that i am hooking in the Twitter bootstrap event 'closed' as follows:</p>
  
  <pre><code>$('.alert').bind('closed', function () {
          $('#message-section').append('&lt;div class="alert alert-block"&gt;&lt;button type="button" class="close" data-dismiss="alert"&gt;×&lt;/button&gt;&lt;/div&gt;');
  
      });
  </code></pre>
  
  <p>With this, whenever user closes message, it will put back the DOM element necessary to attach future messages. It works only for one iteration. The problem is that the event 'closed' bind to '.alert' only triggers event for one time unless i refresh the page...How can I attach an event that is triggered more than once without refresh page? Thank you</p>