Infinite Scroll + .on() Funktion Störung

Question

Ich versuche dynamisch geladenen Inhalt (über das Infinite Scroll-Skript: http://www.infinite-scroll.com/) gestylt werden, wenn durch ein "inview" custom-Ereignis (https://github.com/protonet/jquery.inview) ausgelöst wird.

Mein Code sieht wie folgt aus:

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

Wie man deutlich sehen kann, ist die .data $ Routine wird verwendet, um sicherzustellen, dass die .on() Ereignishandler nicht mehr als einmal ausgeführt wird jedes Element im Auswahlfilter.

Dieser Code funktioniert gut in der Theorie, mit der Ausnahme, dass, sobald der dynamisch geladene Inhalt auf der nächsten Seite an das Dokument angehängt wird, die .on() - Routine für jedes einzelne Element ein zweites Mal ausgeführt wird Elemente hinzugefügt.

können Sie sehen, was ich, indem Sie auf meiner Website bedeuten, wo dieser Code ist live: hxxp: //www.riddlepark.fm/

Wenn Sie auf die nächste Seite blättern, werden Sie alle Elemente sehen verblassen aus und wieder zurück, was durch den Ereignishandler .on() verursacht wird.

Wie kann ich verhindern, dass es auf den zuvor behandelten Elementen der vorherigen Seite (n) ausgeführt wird?

Answer 1

hier ist, was ich in meinem Kommentar meine.

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

So etwas könnte für Sie arbeiten.