0

Yii フレームワークを使用しています。コンテンツ (写真) を無限にスクロールしたい。この部分は正常に動作します。私の唯一の問題は、画像に何らかの効果を与えるスクリプトが必要なことです (画像を大きくしたり、クリックしたときにテキストを表示したりするなど)。無限スクロールがない場合、このスクリプトは正常に機能します。

<?php

   Yii::app()->clientScript->registerScript('overlayimage','
        $(".overlay").hide();

        $(".box").click(function() {

            if($(this).hasClass("col5"))
            {
                $(this).removeClass("col5").addClass("col3").fadeIn(400).find(".overlay").fadeOut(400);
                $(".items").masonry("reload");
                $(this).clearQueue();
            }

            else
            {
                $(".items").find(".col5").removeClass("col5").addClass("col3").fadeIn(400).find(".overlay").fadeOut(400);
                $(this).removeClass("col3").addClass("col5").fadeIn(400).find(".overlay").fadeIn(400);
                $(".items").masonry("reload");
                $(this).clearQueue();
            }

        })
   ',CClientScript::POS_READY);
?>

ただし、無限スクロールがある場合 (スクリプトは にありCClientScript::POS_LOADます)、スクリプトは新しく追加された要素では機能しません。無限スクロールの後に同じスクリプトを追加しようとしましたCClientScript::POS_LOADが、この場合、一部の要素ではスクリプトが 2 回実行され、別の場所でコードを繰り返すのは正しい方法ではないと思います。

新しくロードされた要素に対してもスクリプトを実行する場所を見つけるのを手伝ってくれる人はいますか?

念のため、問題のあるページの例を示します。

4

1 に答える 1

0

新しいアイテムを追加しているという問題が発生しているようです。.box画像の要素を推測していますが、jQuery はこれらにハンドラーをアタッチしません。これのもう 1 つの症状は、ページが最初に読み込まれたときにそこにある要素では jQuery の相互作用が機能するが、スクロールした新しい要素では機能しないことです。

.click() の代わりに、 .on( )を使用する必要があります。特に興味深いのは、委任されたイベント セクションです。

いずれにせよ、おそらく次のような形式が必要になるでしょう。

$("<parentSelector>").on("click", ".box", function(event) { //do some fancy stuff here })

parentSelector は、 を含む要素である必要が.boxあり、ページの永続的な部分です。つまり、ページの読み込み時に読み込まれ、消えません。

于 2012-08-08T16:57:48.890 に答える