0

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?

4

1 回答 1

1

尝试使用JQuery 的 live() 事件。当您创建悬停事件处理程序时，将附加的元素不存在。.live()还处理未来的元素。代码：

$(window).load(function() {

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

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

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

});
于 2013-07-08T23:38:32.400 回答