jQuery Masonry無限滾動

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中，類名稱為“ rollover”。 每當鼠標懸停在滾動div上時，我都會使用JQuery懸停功能，這會將圖像隱藏在其中。 見下文：

$(window).load(function() {

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

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

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

});

當我將鼠標懸停在初始圖像集上時，它們會消失並重新出現。 但是，當我將鼠標懸停在附加的圖像上時，沒有任何反應。 有指針嗎？

Answer 1

嘗試使用JQuery的live（）事件 。 創建懸停事件處理程序元素時，將不存在這些元素。 .live()還可以處理將來的元素。 碼：

$(window).load(function() {

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

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

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

});