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

Question

我正在使用：https://infinite-scroll.com 和运行解决我无法解决的问题。

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

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

加载第一页后，它破坏了我的其他 JS。即我在 "article"

上有点击功能

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

Answer 2

对于有类似问题的其他人，我的最后一段是：

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

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

Infinite scrolling and breaking my other JS

javascript

infinite-scroll