Question

我正在使用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次的一些元素，我认为这不是在不同的地方重复代码的正确方法。

任何人都可以帮我找出我应该为新加载的元素执行脚本的位置吗？

以防here是有问题的示例页面。

Answer 1

听起来你正在遇到你正在添加新项目的问题，我猜你的图像有.box个元素，jQuery不会为这些添加处理程序。另一个症状是，jQuery交互可以处理首次加载页面时存在的元素，但不会处理滚动到的任何新元素。

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

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

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

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

JQUERY无限滚动，将脚本应用于新加载的元素

1 个答案: