时间戳

首页 > 解决方案 > 无限滚动并打破我的其他 JS

javascript - 无限滚动并打破我的其他 JS

问题描述

我正在使用：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。我知道我错过了什么？

标签： javascriptinfinite-scroll

解决方案

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

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

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

推荐阅读