在动态创建的 ul 上使用 photoswipe答案

【问题标题】：use photoswipe on dynamically created ul在动态创建的 ul 上使用 photoswipe
【发布时间】：2013-02-18 22:08:33
【问题描述】：

我正在开发一个 jquery 移动网站，该网站将拥有一个由 instagram 中的 JSON/AJAX 填充的图片库。我可以很好地加载图像，但我想更进一步并使用 photoswipe 来渲染画廊。我遇到的问题是，如果我在从 json 提要填充 ul 之后添加对 photoswipe 的调用，ul 实际上并没有被重绘，所以 photoswipe 找不到任何子元素采用。以下是我的脚本：

HTML

<div data-role="page" id="Photos">
<div data-role="header">
    <a href="javascript:history.go(-1)" data-icon="back" data-direction="reverse">Back</a>      
    <h1>Photos</h1>
</div>
<div data-role="content">   
    <div id="AdBanner">
    </div>
    <ul id="PhotoList">
    </ul>
</div>
</div>

脚本

$("#Photos").live("pagebeforeshow", function(){
    $("ul#PhotoList").children().remove('li');
    var tag = MyTag
    $.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=####",
    function(data){
        $.each(data.data, function(i,item){
            $("ul#PhotoList").append('<li><a href="' + item.images.low_resolution.url + ' rel="external"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></a></li>');
        });
    });
    var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});

有没有办法在调用照片滑动发起者之前刷新ul，或者我应该使用其他事件来进行照片滑动？

【问题讨论】：

标签： jquery photoswipe

【解决方案1】：

我确信这不是这个问题的“正确”答案，但我确实找到了一种解决方法来获得我想要的功能。我没有使用 jquery ul.append 添加列表项，而是使用变量将列表项添加到变量中，然后将 UL.innerhtml 设置为变量：

var Photos = "";
$.each(data.data, function(i,item){
    Photos += '<li><a href="' + item.images.low_resolution.url + '"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="80" /></a></li>';
});
document.getElementById('PhotoList').innerHTML = Photos;

再次，我确信这不是正确的方法，但它对我有用，并且在没有更好的解决方案的情况下，它完成了工作。

【讨论】：

【解决方案2】：

您是在页面加载之前通过 JSON/AJAX 加载图像，还是在页面加载之后加载？

如果在页面加载之前，您是否查看了在 JavaScript 中加载图像并将其附加到 PhotoSwipe 实例的示例代码？

例如。 http://www.photoswipe.com/latest/examples/12-custom-target.html

【讨论】：

不幸的是，我在页面加载后加载它们，所以这个例子对我不起作用。
您是否尝试过从您的 PhotoSwipe 实例“分离”，然后在获得数据后重新连接？