0

「inview」カスタムイベント(https://github.com/protonet )によってトリガーされたときに、動的にロードされたコンテンツ(Infinite Scrollスクリプト:http ://www.infinite-scroll.com/を介して)のスタイルを設定しようとしています。 /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()ルーチンが2回実行されます。

私のWebサイトでは、次のページにスクロールすると、すべての要素がフェードアウトして再びインに戻ることがわかります。これは、.on()イベントハンドラーが原因です。

前のページで以前に処理された要素で実行されないようにするにはどうすればよいですか?

4

1 に答える 1

0

これが私のコメントの意味です。

$(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-27T19:09:41.257 に答える