title: how to bind events on ajax loaded elements
body: <p>I am trying to load content via ajax into a container (#ajax_content). I want to be able to close (hide) the ajax loaded content (everything inside #ajax_content) when I click outside. but I want to bind the onClick of the elements inside. </p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div id="wrapper"&gt; 
        &lt;div id="ajax_content"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>HTML Loaded via AJAX:</p>
  
  <pre><code>&lt;button id="super_hello" &gt;Click&lt;/button&gt;
  </code></pre>
  
  <p>HTML once ajax content is loaded Will be</p>
  
  <pre><code>   &lt;div id="wrapper"&gt; 
        &lt;div id="ajax_content"&gt;
            &lt;button id="super_hello" &gt;Click&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>$(document).ready(function(){
  
      $('.ajax_link').click(function(event) {
         event.preventDefault();
  
         $.get($(this).attr('href'), function(data) {
  
              $('#ajax_content').html('');
              $('#ajax_content').append(data);
  
              $('#ajax_content').css({
                  visibility: 'visible'
              });
  
          });
  
      });
  
      $('#ajax_content').click(function(event){
  
           event.stopPropagation();
  
      });
  
      $('#wrapper').click(function(){
          $('#ajax_content').hide();
          $('#ajax_content').html('');
  
          $(this).hide();
      });
  
  });
  
      $(document).on("click","#super_hello",function(e){
          alert('clicked'); // I can't get this to work
      });
  </code></pre>
  
  <p>Problem: 
  If I comment </p>
  
  <pre><code>$('#ajax_content').click(function(event){
  
       event.stopPropagation();
  
  }); 
  </code></pre>
  
  <p>the event gets bind to super_hello, but then any click inside ajax_content will propagate to the wrapper which closes ajax_content. </p>