title: jQuery functions not working after Infinite Scroll (AJAX) with Masonry
body: <p>this may get complicated so I will try to explain my situation as best as I can.</p>
  
  <p>I am using this jquery plugin <a href="http://www.infinite-scroll.com/" rel="nofollow">http://www.infinite-scroll.com/</a> along with masonry: <a href="http://masonry.desandro.com/" rel="nofollow">http://masonry.desandro.com/</a></p>
  
  <p>Everything is working fine.</p>
  
  <p>However, I'm trying to make some info relating to each post appear when you hover over a post. Here is my code:</p>
  
  <pre><code>$(".main").hover(function(){
      $(this).next(".info").slideToggle("fast");
  });
  </code></pre>
  
  <p>This only works on the first page content and not the extra content that is loaded by the infinite scroll.</p>
  
  <p>So I tried adding the function to the callback of my masonry code:</p>
  
  <pre><code>    // trigger Masonry as a callback
  function(newElements) {
      // hide new items while they are loading
      var $newElems = $(newElements).css({opacity: 0});
      // ensure that images load before adding to masonry layout
      $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({opacity: 1});
          $container.masonry('appended', $newElems, true); 
      });
      $(".main").hover(function(){
          $(this).next(".info").slideToggle("fast");
      });     
  });
  </code></pre>
  
  <p>(Excuse me if I'm doing this completely wrong, I have never worked with Ajax before and am merely experimenting)</p>
  
  <p>This made the hover function work on the new extra content loaded by Infinite scroll, however it then conflicted with the original content.</p>
  
  <p>So, what is the best way to implement my hover function so it will work properly for all posts loaded before and after the Ajax call?</p>
  
  <p>Thanks.</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>Solved the problem by changing my method to this:</p>
  
  <pre><code>    $(document).on("click",".main",function(){
      $(this).next(".info").slideToggle("fast");
  });
  </code></pre>
  
  <p><a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a></p>
  
  <p>I will leave the original question here incase someone with a similar problem finds it useful.              </p>