title: How to bind Events on Ajax loaded Content?
body: <p>I have a link, <code>myLink</code>, that should insert AJAX-loaded content into a <code>div</code> (appendedContainer) of my HTML page. The problem is that the <code>click</code> event I have bound with jQuery is not being executed on the newly loaded content which is inserted into the appendedContainer. The <code>click</code> event is bound on DOM elements that are not loaded with my AJAX function.</p>
  
  <p>What do I have to change, such that the event will be bound? </p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a class="LoadFromAjax" href="someurl"&gt;Load Ajax&lt;/a&gt;
  &lt;div class="appendedContainer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>My JavaScript:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$(".LoadFromAjax").on("click", function(event) {
      event.preventDefault();
      var url = $(this).attr("href"),
          appendedContainer = $(".appendedContainer");
  
      $.ajax({
      url: url,
      type : 'get',
      complete : function( qXHR, textStatus ) {           
          if (textStatus === 'success') {
              var data = qXHR.responseText
              appendedContainer.hide();
              appendedContainer.append(data);
              appendedContainer.fadeIn();
          }
        }
      });
  
  });
  
  $(".mylink").on("click", function(event) { alert("new link clicked!");});
  </code></pre>
  
  <p><strong>The content to be loaded:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;some content&lt;/div&gt;
  &lt;a class="mylink" href="otherurl"&gt;Link&lt;/a&gt;
  </code></pre>