title: Javascript not working on content appended via ajax on scroll
body: <p>I have been working on adding more content to a page as the scroll reaches end of page. </p>
  
  <p>The problem is that JavaScript is not working on the content loaded via ajax</p>
  
  <p>Below is a simple code:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="ajax_load_wrapper"&gt;
          &lt;div id="title_191"&gt;
          &lt;div id="title_172"&gt;
          &lt;div id="title_171"&gt;
          &lt;div id="title_105"&gt;
          &lt;div id="title_95"&gt; 
          &lt;!-- new divs load here on which jQuery events don't work --&gt;
      &lt;/div&gt;
  
      &lt;div id="load_more_vbz" style="display: none;"&gt;
          &lt;a href="somelink"&gt;loading...&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>(function ($) {
  
      $(window).on('scroll',function(){
          if (($(window).scrollTop() == $(document).height() - $(window).height() )){
              load_mode_content();
          }
      });
  
      //loads more content
      function load_mode_content(){
          var link = $('#load_more_vbz a').attr('href');
  
          $('#load_more_vbz').show(); //show the loading image
  
          $.get(link).done( function(data){
              $('.ajax_load_wrapper').append(data); //appends new data
              $('#load_more_vbz').hide();
          });
          return false;
      }
  
  })(jQuery);
  </code></pre>