具有动态内容 JQuery AJAX 的漂亮照片答案

【问题标题】：prettyPhoto with dynamic content JQuery AJAX具有动态内容 JQuery AJAX 的漂亮照片
【发布时间】：2013-06-21 08:38:17
【问题描述】：

你好，我有这段代码通过 AJAX 调用加载内容，这些是 vimeo 视频，当我放置静态代码时可以工作......但不是动态加载的内容我尝试了很多解决方案，但对我不起作用任何帮助都会得到帮助这是代码：

$(document).ready(function(){
    $("a[data-rel^='prettyPhoto']").prettyPhoto();
    $(".category").click(function(){
        var categoryid = $(this).data('categoryid');
            $.ajax({
                url:'<?php echo base_url() ?>main/getPortfolioVideos',
                type:'POST',
                data: { category_id: categoryid, page_slug: "index" }
                }).done(function(data){
                    var rows = $.parseJSON(data);
                    var videodata = "";
                    $(rows).each(function(index, value){
                            $.each(value, function(k, v){
                                if(k == "video_link"){
                                    videodata += '<article class="entry"> <a data-rel="prettyPhoto" href="http://vimeo.com/'+ v +'">';
                                    videodata += '<iframe src="http://player.vimeo.com/video/'+ v +'" width="270" height="160" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">';
                                    videodata += '</iframe><span class="video-hover"></span> </a> </article>';  
                                }
                                console.log(k+":"+v);
                            });
                    })
                    $(".portfolio").html(videodata);
                });
    });
});

【问题讨论】：

标签： jquery prettyphoto

【解决方案1】：

抱歉回复晚了，我今天也遇到了同样的问题。所以，我通过以下方式修复了它 - 只是添加到 $.ajax 成功功能代码中，如果出现新内容，它将调用漂亮的照片。

首先，编写一个函数包装器：

function prettyPhotoLoad()
{
     // apply prettyPhoto plugin for video previews
     $("a[rel^='prettyPhoto']").prettyPhoto();    
}

文件准备好后应用漂亮的照片：

$(document).ready(function() 
{   
    prettyPhotoLoad();
}

进行 ajax 调用并更新漂亮的照片：

$.ajax(
{
    url: base_url + "/ajax/ShowMoreWebResults",    
    success: function(myVal)
    {   
        $("#resultsContainer").append(myVal.content);

        // load pretty photo
        prettyPhotoLoad();
    }
});

注意：我已通过使用 "$("a[rel^='prettyPhoto']").prettyPhoto();" 行解决了我的问题。感谢您的回答。

【讨论】：