jQuery Masonry infinite scroll

Question

I have infinite scroll working using the Masonry plugin and images are appended to the web page on scroll. See below:

 <script>
   (function () {
    var $tumblelog = $('#container');
    $tumblelog.infinitescroll({
        navSelector: ".pagination",
        nextSelector: ".pagination a:first-child",
        itemSelector: "article",
    },

    function (newElements) {


        var $newElems = $(newElements).css({
            opacity: 0
        });


        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $tumblelog.masonry('appended', $newElems);


        });
    });



    $tumblelog.imagesLoaded(function () {

        $tumblelog.masonry({
            itemSelector: '.rollover',
            columnWidth: 425
        });
    });
})();
</script>

The initial set of images are each contained within a div, class name "rollover". I am using JQuery hover function whenever the mouse hovers over the rollover div, which hides the image within it. See below:

$(window).load(function() {

   $('div.rollover').hover(
  function () {

       $(this).children('.thumb').hide(); 
  },
  function () {

      $(this).children('.thumb').show(); 
  });

});

When I hover over the initial set of images they disappear and reappear as intended. But when I hover over the appended images nothing happens. Any pointers please?

Answer 1

Try using JQuery's live() event . When you are creating hover event handler elements that will be appended don't exist. .live() also handles future elements. Code:

$(window).load(function() {

   $('div.rollover').live("hover", 
  function () {

       $(this).children('.thumb').hide(); 
  },
  function () {

      $(this).children('.thumb').show(); 
  });

});