无限滚动并破坏我的其他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");
});

Answer 2

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

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