title: Attaching Event Handlers after Infinite Scroll Update
body: <p>I am using the infinite scroll plugin <a href="http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/" rel="nofollow">http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/</a> to load page content.</p>
  
  <p>I have a jQuery event listener such as:</p>
  
  <pre><code>$('.like-action').on('click',
      function(event){
        likeComment($(this)); 
        event.preventDefault();
  });
  </code></pre>
  
  <p>That get's loaded on <code>$(document).ready</code>. However, when new content is loaded with the <code>infinitescroll</code> the event listeners are not applied/available to the new content. So, I created a function that is called on the callback of the <code>infinitescroll</code> (when all content has loaded).The function:</p>
  
  <pre><code>function afterUpdate(){
  $('.like-action').on('click',function(event){
        likeComment($(this)); 
        event.preventDefault();
  });}
  </code></pre>
  
  <p>What ends up happening however, is for the old content (that is already loaded) when a link is clicked that has the <code>.like-action class</code>, the <code>likeComment</code> function is called however many times new content has been loaded + the original <code>$(document).ready</code>.</p>
  
  <p>Ex: content is loaded on page load. link executes <code>likeComment</code> 1 on click. After scrolling down and having new content loaded (and callback) if you click the same link as before, <code>likeComment</code> is executed twice. etc,etc.</p>
  
  <p>What am I doing wrong here? </p>
  
  <p>Is my event listener written incorrectly? </p>
  
  <p>Is there a way to write a listener that automatically works for all elements in the <code>DOM</code> even if they were not there on page load? </p>
  
  <p>Or, is there a way to only register the .on on elements that were just loaded by infinite scroll (so there isn't a duplication)?</p>