Infinite Scroll + .on（）函数麻烦

我试图通过“inview”自定义事件（https://github.com/protonet/jquery.inview）触发时动态加载内容（通过无限滚动脚本：http://www.infinite-scroll.com/）。Infinite Scroll + .on（）函数麻烦

我的代码如下所示：

$(document).on("inview", ".attachment-portfoliosmall", function(e) { 
    if($.data(this, "styleappended")) { 
    return true; 
    } 
    $.data(this, "styleappended", true); 
    $(".attachment-portfoliosmall").css('visibility','visible').hide().fadeIn('slow'); 
    $(".attachment-portfoliosmall").parent(".portfoliopreload").css("background", "none"); 
});

您可以清楚地看到，$。数据程序，以用于确保对。对（）事件处理不被执行一次以上选择过滤器中的每个元素。

这段代码在理论上效果很好，除了下一页的动态加载的内容被附加到文档后，.on（）例程将再次在每个单元上运行，而不仅仅是新的添加元素。

你可以看到我所说的去我的网站是指哪里这个代码是活的：hxxp：//www.riddlepark.fm/

如果滚动到下一个页面，你会看到所有的元素淡出出来并再次返回，这是由.on（）事件处理程序引起的。

我该如何防止它在前一页上的处理过的元素上执行？

来源

2012-03-27 Max Hilland

您是否考虑过将“已加载”添加到您的元素类中并对其进行过滤？ – 2012-03-27 19:01:57

您是否可以在代码中举例说明？ :)我很新的JavaScript，甚至简单的事情似乎令人望而生畏。 – 2012-03-27 19:08:08

这是我在评论中的意思。

$(document).on("inview", ".attachment-portfoliosmall", function(e) { 
    var $this = $(this); 
    if(!$this.hasClass('loaded')) { 
     $this.addClass('loaded'); 
     $this.css('visibility','visible').hide().fadeIn('slow'); 
     $this.parent(".portfoliopreload").css("background", "none"); 
    } 
});

类似的东西可能适合你。

来源

2012-03-27 19:09:41

谢谢，这似乎工作！更好的是，它现在只在像我想要的那样进入视图时加载元素，而不是一次加载页面上的所有元素。完善！现在确保这是跨浏览器兼容*叹* – 2012-03-27 19:15:52

Infinite Scroll + .on（）函数麻烦

回答

相关问题