title: Bootstrap Button click event with Jquery override
body: <p>I am prototyping a new website using Bootstrap 3 and jQuery.</p>
  
  <p>I have run into a problem with the click event of a button in that it works once...only.  The Click event is overridden in jQuery and I think that is where the problem lies...not jQuery, but my knowledge of jQuery.</p>
  
  <p>The HTML code is...</p>
  
  <pre><code>&lt;div class="row" id="bigCallout"&gt;
  
              &lt;div class="col-md-12"&gt;
  
                  &lt;!-- Alert Block to show when Bloody Big Button pressed --&gt;
                  &lt;div class="alert alert-success alert-block fade in" id="successAlert"&gt;
                      &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
  
                      &lt;h4&gt;Success!&lt;/h4&gt;
                      &lt;p&gt;You just made this element display by using jQuery. Click the 'x' to close this bad boy!&lt;/p&gt;                     
                  &lt;/div&gt;&lt;!-- end alert-block --&gt;
  
                  &lt;!-- Visible only on small devices --&gt;
                  &lt;div class="well well-sm visible-sm"&gt;
                      &lt;a href="#" class="btn btn-large btn-block btn-default"&gt;&lt;span class="glyphicon glyphicon-phone"&gt; Give Us a Call!&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- end well-sm --&gt;
                  &lt;div class="well"&gt;
                      &lt;div class="page-header"&gt;
                          &lt;h1&gt;A Fancy Header. &lt;small&gt;A subheading for extra awesomeness...dood!&lt;/small&gt;&lt;/h1&gt;                  
                      &lt;/div&gt;&lt;!-- end page-header --&gt;
                      &lt;p class="lead"&gt;Some catchy copy to get your users engaged . Use this area to come up with something nice and convincing.  Know what I'm saying?&lt;/p&gt;
  
                      &lt;!-- Bloody Big Button to set the alert Block --&gt;
                      &lt;a href="#" class="btn btn-large btn-primary" id='alertMe'&gt;A Bloody Big Button&lt;/a&gt;
                      &lt;a href="#" class="btn btn-large btn-link"&gt;...or a secondary link&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- end well --&gt;
              &lt;/div&gt;&lt;!-- end col-md-12 --&gt;
  
          &lt;/div&gt;&lt;!-- end bigCallout --&gt;
  </code></pre>
  
  <p>And the jQuery code for the button click is...</p>
  
  <pre><code>$(function(){
  
   //Big Button click event
    $("#alertMe").click(function(e){
          e.preventDefault();
  
          $("#successAlert").slideDown();
      });
  });
  </code></pre>
  
  <p>At this time this action can happen one-time only and I need help to allow it to be repeated without refreshing the screen.</p>