Question

我正在尝试通过“inview”自定义事件（http://www.infinite-scroll.com/）触发动态加载的内容（通过无限滚动脚本：https://github.com/protonet/jquery.inview）。

我的代码如下所示：

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

正如您可以清楚地看到的那样，$ .data例程用于确保.on（）事件处理程序不会对选择过滤器中的每个元素执行多次。

这段代码在理论上非常有用，除了将下一页上的动态加载内容附加到文档后，第二次在每个元素上运行.on（）例程，而不仅仅是新添加的元件。

您可以通过访问此代码所在的网站了解我的意思：hxxp：//www.riddlepark.fm/

如果滚动到下一页，您将看到所有元素再次淡出并重新进入，这是由.on（）事件处理程序引起的。

如何阻止它在前一页上先前处理的元素上执行？

Answer 1

这就是我在评论中的意思。

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

这样的事可能适合你。

无限滚动+ .on（）函数有问题

1 个答案: