JQuery無限滾動幫助 - 將變量傳遞到第二頁

Question

問題：我已經在我的Rails應用程序中實現了一個infinitescroll插件以及JQuery Masonry。它完美的工作，但我面臨一個小問題：從第二頁開始，hover函數不會被觸發。這個問題與Stackoverflow上的post非常相似。我應該在砌體回調之後再次調用我的懸停功能。

我的原代碼：

<script>  
$(function() { 
    var $container = $('#container_masonry'); 

    $container.infinitescroll({ 
     navSelector: '.pagination' 
     nextSelector: '.pagination a', 
     itemSelector: '.image_masonry' 
     loading: { 
     finishedMsg: 'Done loading' 
     img: 'http://i.imgur.com/6RMhx.gif' 
     } 
    }, 
     // trigger Masonry as a callback 
     function(newElements) { 
      //hide new items while loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      //images must be loaded completely before adding to layout 
      $newElems.imagesLoaded(function(){ 
       //they are loaded and ready to be showed 
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      }); 
     } 
    ); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector: '.image_masonry', 
     columnWidth: 10, 
     isAnimated: true, 
     animationOptions: { duration: 400 }, 
     isResizable: true, 
     isFitWidth: true 
     }); 

     $('.image_masonry').hover(
     function(){ 
     $('.title',this).fadeIn(); 
     $('.like_num',this).show(); 
     var buttonDiv= $(this).children('.button'); 
     buttonDiv.toggle(); 
     }, function(){ 
     $('.title',this).fadeOut(); 
     $('.like_num',this).hide(); 
     var buttonDiv= $(this).children('.button'); 
     buttonDiv.toggle(); 
     }); 
    }); 

}); 
</script> 

我要補充以下，

 $('.image_masonry').hover(
     function(){ 
     $('.title',this).fadeIn(); 
     $('.like_num',this).show(); 
     var buttonDiv= $(this).children('.button'); 
     buttonDiv.toggle(); 
     }, function(){ 
     $('.title',this).fadeOut(); 
     $('.like_num',this).hide(); 
     var buttonDiv= $(this).children('.button'); 
     buttonDiv.toggle(); 
     }); 

到之後，

  $newElems.imagesLoaded(function(){ 
       //they are loaded and ready to be showed 
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
       //ADD HOVER FCN HERE 

然而，簡單地增加整個懸停功能做不行。我是jQuery的新手，所以我不完全確定，但我需要傳遞相關變量以及它的工作功能（從類似的post得到了這個提示。所以我應該添加類似於

 $('.image_masonry').hover(
     function(SOME-RELATED-VARIABLES){ 
     $('.title',this).fadeIn(); 
     $('.like_num',this).show(); 
     var buttonDiv= $(this).children('.button'); 
     buttonDiv.toggle(); 
     }, function(SOME-RELATED-VARIABLES){ 
     $('.title',this).fadeOut(); 
     $('.like_num',this).hide(); 
     var buttonDiv= $(this).children('.button'); 
     buttonDiv.toggle(); 
     }); 

但我需要有人來教我，我應該放什麼東西在那裏。我，因爲我沒有使用jQuery熟悉的掙扎。我感謝您的幫助很大！

Answer 1

你失蹤行5之間的一些逗號11.此外，如果您稍後要加載外部內容，則需要根據您的版本將代碼懸停事件與on或delegate委託給我，我在下面添加了on。

$(function() { 
    var $container = $('#container_masonry'); 

    $container.infinitescroll({ 
    navSelector: '.pagination', 
    nextSelector: '.pagination a', 
    itemSelector: '.image_masonry', 
    loading: { 
     finishedMsg: 'Done loading', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    // trigger Masonry as a callback 
    function (newElements) { 
    //hide new items while loading 
    var $newElems = $(newElements).css({ 
     opacity: 0 
    }); 
    //images must be loaded completely before adding to layout 
    $newElems.imagesLoaded(function() { 
     //they are loaded and ready to be showed 
     $newElems.animate({ 
     opacity: 1 
     }); 
     $container.masonry('appended', $newElems, true); 
    }); 
    }); 

    $container.imagesLoaded(function() { 
    $container.masonry({ 
     itemSelector: '.image_masonry', 
     columnWidth: 10, 
     isAnimated: true, 
     animationOptions: { 
     duration: 400 
     }, 
     isResizable: true, 
     isFitWidth: true 
    }); 

    $('body').on({ 
     mouseenter: function() { 
     $('.title', this).fadeIn(); 
     $('.like_num', this).show(); 
     var buttonDiv = $(this).children('.button'); 
     buttonDiv.toggle(); 
     }, 
     mouseleave: function() { 
     $('.title', this).fadeOut(); 
     $('.like_num', this).hide(); 
     var buttonDiv = $(this).children('.button'); 
     buttonDiv.toggle(); 
     } 
    }, '.image_masonry'); 
    }); 

});