无限滚动并破坏我的其他 JS

Question

我正在使用：https : //infinite-scroll.com并遇到一个我无法解决的问题。

无限滚动效果很好，这是我的初始化：

var $container = $('.parent').infiniteScroll({
  path: '.nav-prev a',
  append: '.article',
    status: '.scroller-status',
  hideNav: '.navigation-index',
});     

加载第一页后，它会破坏我的其他 JS。即我在“文章”上有一个点击功能

    $(".article").click(function(){
        $(".hidden").hide("fast");
        $(this).next('.hidden').slideToggle("fast");
    });

滚动开始后，这将停止工作。

我尝试了各种事情，例如：

var $container = $('.parent').infiniteScroll({
    $(".article").click(function(){
    $(".hidden").hide("fast");
    $(this).next('.hidden').slideToggle("fast");
    });
});

但我就是无法让它使用我的 JS。我知道我错过了什么？

Answer 1

这实际上是一个非常普遍的问题。问题是在添加事件处理程序时将 jquery 事件处理程序添加到 DOM 中的对象。这意味着在添加新对象后，新对象不会获得事件处理程序。

幸运的是，有一个简单的解决方案，使用委托事件处理程序按如下方式修改您的事件处理程序：

$(document).on("click",".article",function(){

或者我认为将它添加到.parent可能比将它添加到document.

$(".parent").on("click",".article",function(){

无论哪种方式都应该有效，但document肯定会有效。

所以：

$(".parent").on("click",".article",function(){
    $(".hidden").hide("fast");
    $(this).next('.hidden').slideToggle("fast");
});

或者：

$(document).on("click",".article",function(){
    $(".hidden").hide("fast");
    $(this).next('.hidden').slideToggle("fast");
});