使用 ajax prettyphoto 加载更多图像时不起作用

Question

一开始我加载了3张照片，单击 "load more" 后，ajax 获取了其他 3 张照片但是当我点击这张取来的照片时，漂亮的照片不起作用它不会打开集成的图像滑块，它只会以全尺寸打开图像..（就像正常的 link）并且控制台不会显示任何错误。

您可以在下面找到脚本：

<script type="text/javascript">
    $( document ).on( 'click', '.loadmore', function () 
    {
        $(this).text('Loading...');
        var ele = $(this).parent('li');
        $.ajax({
            url: 'loadmore.php',
            type: 'POST',
            data: 
            {
                page:$(this).data('page'),
            },
            success: function(response)
            {
                if(response)
                {
                    ele.hide();
                    $(".news_list").append(response);
                }
            }
        });
    });
</script>

在此先感谢您的帮助...

Answer 1

由于您将动态项目添加到 dom，因此您必须重新初始化您的 Pretty Photo 实例。

类似的东西应该可以工作

$( document ).on( 'click', '.loadmore', function () 
{
    $(this).text('Loading...');
    var ele = $(this).parent('li');
    $.ajax({
        url: 'loadmore.php',
        type: 'POST',
        data: 
        {
            page:$(this).data('page'),
        },
        success: function(response)
        {
            if(response)
            {
                ele.hide();
                $(".news_list").append(response);
                $("a[rel^='prettyPhoto']").prettyPhoto();
            }
        }
    });
});

使用 ajax prettyphoto 加载更多图像时不起作用

while load more image using ajax prettyphoto not work

php

ajax

prettyphoto