Javascript 无限滚动和破坏我的另一个JS_Javascript_Infinite Scroll

Javascript 无限滚动和破坏我的另一个JS

javascript

Javascript 无限滚动和破坏我的另一个JS,javascript,infinite-scroll,Javascript,Infinite Scroll,我正在使用：并且遇到了一个我无法解决的问题无限卷轴运行良好，以下是我的初始化： var $container = $('.parent').infiniteScroll({ path: '.nav-prev a', append: '.article', status: '.scroller-status', hideNav: '.navigation-index', }); 加载第一页后，它会打断我的另一个JS。我在“文章”上有一个点击功能卷轴启动后，此功能

我正在使用：并且遇到了一个我无法解决的问题

无限卷轴运行良好，以下是我的初始化：

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

加载第一页后，它会打断我的另一个JS。我在“文章”上有一个点击功能

卷轴启动后，此功能停止工作

我尝试过各种方法，例如：

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

但我就是不能用我的JS。我知道我遗漏了什么？

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

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

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

或者我认为将其添加到

.parent

可能比将其添加到

文档

更好

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

任何一种方法都应该有效，但

文档

肯定有效

所以：

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

或：

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

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