javascript - jQuery 函数在使用 Masonry 进行无限滚动 (AJAX) 后不起作用

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

我正在使用这个 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/

我将把原来的问题留在这里，以防遇到类似问题的人觉得它很有用。

最佳答案

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

关于javascript - jQuery 函数在使用 Masonry 进行无限滚动 (AJAX) 后不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10565074/