如何將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，但這有點超出了這個問題的範圍。