Question

这可能会变得复杂，所以我会尽力解释我的情况。

我正在使用此jquery插件http://www.infinite-scroll.com/以及砌体：http://masonry.desandro.com/

一切都很好。

但是，当您将鼠标悬停在某个帖子上时，我会尝试显示与每个帖子相关的一些信息。这是我的代码：

$(".main").hover(function(){
    $(this).next(".info").slideToggle("fast");
});

这仅适用于第一页内容，而不适用于无限滚动加载的额外内容。

所以我尝试将该函数添加到我的砌体代码的回调中：

    // trigger Masonry as a callback
function(newElements) {
    // hide new items while they are loading
    var $newElems = $(newElements).css({opacity: 0});
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({opacity: 1});
        $container.masonry('appended', $newElems, true); 
    });
    $(".main").hover(function(){
        $(this).next(".info").slideToggle("fast");
    });     
});

（对不起，如果我这样做完全错了，我以前从未使用过Ajax而只是在尝试）

这使得悬停功能适用于由无限滚动加载的新额外内容，但它与原始内容冲突。

那么，实现我的悬停函数的最佳方法是什么，以便它能够在Ajax调用之前和之后加载的所有帖子中正常工作？

感谢。

编辑：

通过将我的方法改为此来解决问题：

    $(document).on("click",".main",function(){
    $(this).next(".info").slideToggle("fast");
});

http://api.jquery.com/on/

我会在这里留下原始问题，因为有类似问题的人发现它很有用。

Answer 1

$(document).on("click",".main",function(){
    $(this).next(".info").slideToggle("fast");
});

Answer 2

最新版本的http://www.infinite-scroll.com/以及砌体：http://masonry.desandro.com/以下代码适用于我：

 $grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
        $(this).next(".info").slideToggle("fast"); 
      // OR your code you want to load after infinite scroll loads
    });

在这里查看更多https://infinite-scroll.com/events.html#append

jQuery函数在使用Masonry的Infinite Scroll（AJAX）之后无法正常工作

2 个答案: