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 不会将处理程序附加到这些。这种情况的另一个症状是 jQuery 交互作用于页面首次加载时存在的元素，但不适用于您滚动到的任何新元素。

您需要使用 .on() 而不是.click()。您特别感兴趣的应该是委派事件部分。

无论如何，您可能需要如下格式：

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

parentSelector 需要是一个包含 的元素.box，并且是页面的永久部分，即在页面加载时加载并且不会消失。

于 2012-08-08T16:57:48.890 回答