Javascript jQuery函数在无限滚动（AJAX）后无法使用

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

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

我将此jquery插件与砌体一起使用：

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

一切正常

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

然而，当你把鼠标悬停在一篇文章上时，我试图让每一篇文章的相关信息出现。这是我的密码：

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

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

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

$(document).on("click",".main",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");
    });     
});

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

（请原谅，如果我做得完全错误，我以前从未使用过Ajax，我只是在尝试）

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

这使得悬停功能可以在无限滚动加载的新额外内容上工作，但是它随后与原始内容发生冲突

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

那么，实现hover函数的最佳方法是什么，这样它就可以在Ajax调用之前和之后加载的所有帖子中正常工作

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

谢谢

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

---

编辑：

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

通过将我的方法更改为以下方式解决了问题：

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

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

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

我将把原来的问题留在这里，以防有类似问题的人发现它有用

最新版本的随砌石：以下代码适用于我：

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

 $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
    });

---

在此处查看更多信息

要将问题标记为已解决，您应该回答问题，然后将其标记为已接受。不要把答案当作编辑的问题。@Imp我试过了，但我没有足够的声誉这么做。我想你只能等一等。。。

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