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

我正在使用Instagram API将图库加载到页面上。 AJAX看起来像这样

$.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('
'); } } }); 

在AJAX将内容加载到页面后，HTML呈现类似的内容：

我知道在将动态内容添加到页面后我需要加载灯箱，但似乎无法弄清楚如何做到这一点。 我从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('
'); } //Re-initialise lightboxes $('.instagram').lightBox(); } }); 

您需要将相同的配置传递给lightBox（）函数，就像您在加载页面时最初设置灯箱一样。

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

鉴于我所看到的代码，上面应该是最简单的解决方案。

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