title: Infinite Scroll Breaking jQuery Event
body: <p>I have a function in jQuery that when you hover over a div it, it disappears and shows another div in its place. The function works well until I load items using Ajax for infinite scrolling. I know it has to do with binding the new elements (from what I've read, using on()), but as I am new to jQuery, I have no idea how to implement this change.I've been trying for the past few hours, but have made no headway.</p>
  
  <p>(Specific problem: new_social hover is broken on ajax load for new loaded items)</p>
  
  <p>Any help would be much appreciated, especially in code form! Thanks so much!</p>
  
  <p>Here are the functions:</p>
  
  <pre><code>$("a.share").hover(function(){
    $(this).closest($('div.new_story')).children("div.new_social_buttons").show();
    $(this).closest(".new_social").hide();
   },
   function(){
    });
  
  
  $("div.new_social_buttons").hover(function(){
  
  },
  function(){
    $(this).hide();
     $(this).closest($('div.new_story')).children("div.new_social").show();
  });
  </code></pre>
  
  <p>Here is the ajax load function:</p>
  
  <pre><code>jQuery.ias({
  container : '#middle',
  item: '.new_story',
  pagination: '#pagination',
  next: 'a.next',
  loader: '&lt;img src="loader.gif"/&gt;',
  history: false
  
   });
  </code></pre>
  
  <p>Here is where I got the infinite scroll, I think it has the jQuery behind the function call:
  <a href="https://github.com/webcreate/Infinite-Ajax-Scroll" rel="nofollow">https://github.com/webcreate/Infinite-Ajax-Scroll</a></p>
  
  <p>Thanks again!</p>