Question

我使用Masonry插件进行无限滚动工作，并在滚动时将图像附加到网页上。见下文：

 <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>

初始图像集分别包含在div中，类名称“翻转”。每当鼠标悬停在翻转div上时，我就会使用JQuery悬停功能，这会将图像隐藏在其中。见下文：

$(window).load(function() {

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

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

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

});

当我将鼠标悬停在初始图像集上时，它们会消失并按预期重新出现。但当我将鼠标悬停在附加图像上时，没有任何反应。有什么指示吗？

Answer 1

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

$(window).load(function() {

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

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

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

});

jQuery Masonry无限滚动

1 个答案: