jQuery simple hover effect lost on appended elements (by infinite scroll)

Question

I'm developing a wordpress theme which appends the posts with infinite scroll and that has a simple jQuery snippet to hide/show the post titles, when the post is being hovered:

$('article').mouseover(function() { 
    $(this).next('h2.subtitled').show();
}).mouseout(function() {
    $(this).next('h2.subtitled').hide();
});

So basically every post ('article') is followed by its title ('h2.subtitled'), which is initially hidden (via display:none;) and fixed positioned at the browser's bottom. This seems to work well so far, but once the infinite scroll loads new elements:

$(function(){

  var $container = $('#main');

  $container.isotope({
    itemSelector : 'article'
  });

  // update columnWidth on window resize
    $(window).smartresize(function(){
      $container.isotope({
      });
    });

  $container.infinitescroll({
    navSelector  : '.pagination',    // selector for the paged navigation 
    nextSelector : '.pagination a.next',  // selector for the NEXT link (to page 2)
    itemSelector : 'article',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
      }
    },
    // call Isotope as a callback
    function( newElements ) {
      $container.isotope( 'appended', $( newElements ) ); 
    }
  );


});

The hover effects doesn't work anymore on the newly appended elements. I kind of get, that the hover function was already fired and the new elements don't even know that they were supposed to hover something, so I tried to repeat the hover function in the callback of the infinite scroll:

function( newElements ) {
        $container.isotope( 'appended', $( newElements ) );

        $('article').mouseover(function() { 
                $(this).next('h2.subtitled').show();
            }).mouseout(function() {
                $(this).next('h2.subtitled').hide();
        });
    }

Which does not work, they new elements still do not hover. Can anyone help?

Thanks!

EDIT: Here is the basic HTML structure:

<div id="main">
    <article class="hubbub">
        //article content
    </article>
    <h2 class="subtitled">
        //h2 content
    </h2>
</div>

Okay, sorry, I figured the problem, it lies somewhere else. Thanks so far… As the follows the and the infinite scroll only grabs the element as an itemSelector, there where no 's in the appended elements. So, I need the elements on a fixed place at the bottom of the border. As soon as I put them inside of the which has {position: relative;}, the elements are fixed related to the parent , on each 's bottom. Is there a way, to keep the inside of the , but still have them fixed on the browser's bottom? Thanks!

Answer 1

Use delegated events in jQuery:

JavaScript:

$('#main').on('mouseenter mouseleave', 'article', function() { 
    $(this).next('h2.subtitled').toggle();
});

HTML

<div id="main">
    <article>here is some text</article>
    <h2 class="subtitled">h2 header</h2>

    <article>article 2: here is some text</article>
    <h2 class="subtitled">article 2: h2 header</h2>
</div>

jsFiddle Demo

I am assuming is article is a CSS class and so you need the selector .article. Binding this way you do not need to re-fire the function after the ajax update, you attach the "watch" on the parent container which then "listens" for all newly attached child elements too.

EDIT: After further reading, you can use the mouseeneter and mouseleave events since they have the correct (lack of) event bubbling otherwise the "mouse in" event will fire too often for your needs.