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（）函數麻煩

回答

相關問題