如何将jquery lightbox添加到通过ajax添加到页面的内容？

Question

我正在使用Instagram API将画廊加载到页面上。阿贾克斯看起来是这样的

$.ajax ({ 
    type: 'GET', 
    dataType: 'jsonp', 
    cache: false, 
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID, 
    success: function(data) { 
     for (i in data.data) { 
      $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram" rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>'); 
     }  
    } 
}); 

的AJAX加载内容到页面后，HTML呈现这样的事情：

<a href="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_7.jpg" 
title="Photo via washingtonwoman on Instagram" rel="lightbox[gallery]"><img 
class="instagram-image" 
src="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_5.jpg"></a> 

我知道我需要加载收藏夹添加动态内容后，到页面，但似乎无法弄清楚如何做到这一点。我从stackoverflow尝试过的所有其他建议都创建了令我的浏览器崩溃的疯狂递归。

使用这个jQuery灯箱插件：http://leandrovieira.com/projects/jquery/lightbox/

Answer 1

请问像这样的工作？

$.ajax ({ 
    type: 'GET', 
    dataType: 'jsonp', 
    cache: false, 
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID, 
    success: function(data) { 
     for (i in data.data) { 
      $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram" rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>'); 
     }  

     //Re-initialise lightboxes 
     $('.instagram').lightBox(); 
    } 
}); 

您需要将相同的配置传递到灯箱（）函数为您最初用来设置灯箱加载页面时。

基本上，这里发生的是我们强迫lightbox在ajax内容加载后重新初始化。

上面的应该是给我看到的代码的最简单的解决方案。

如果你想玩AJAX事件多一点，你可能想尝试绑定ajax event，但这有点超出了这个问题的范围。