在动态添加的内容上激活灯箱

我正在开发一个小组合，我可以在其中选择一个类别，当我点击它时，将显示该类别的内容（缩略图）（这是通过数组）。

例如

photography[0] =  photography[1] =  

首先，该网站显示所有类别的内容，当我点击缩略图时，它会激活灯箱，但是如果我选择一个类别，然后按其中一个剩余的缩略图只是导致图像，并且不会使用灯箱打开图像。

这是缩略图在页面初始加载时的样子：

选择类别后，它会删除div中的内容，并将其替换为其他内容，例如完全相同的内容。 （所以rel =“lightbox”仍然存在）。

如果有人可以帮我解决这个问题，我会喜欢它（我正在使用jquery btw）。

在回应Alex Sexton之后编辑：

 $(".thumbnaila").live("mouseover", function(){ activateLightbox($(this));}); function activateLightbox(dit) { $('a[rel="lightbox"]').lightBox({ overlayBgColor: '#000', overlayOpacity: 0.65, containerResizeSpeed: 350 }); 

}

但是现在当我选择一个类别并选择一个缩略图时，它会加载正确的灯箱，但也会在我想要的那个上方加载一个空的灯箱，如你所见：

有人知道是什么原因造成的吗？

Answer 1

如果您使用常规事件处理程序绑定链接：

 $('a[rel=lightbox]').click(function(e){ ... }); 

然后，将不会捕获绑定后添加的任何新内容。

您可以在更改内容时重新运行绑定，或者更简单地使用jQuery的事件委派来附加处理程序：

 $('a[rel=lightbox]').live('click', function(e){ ... }); 

Answer 2

您可以使用$ .lightboxName（）调用许多jQuery灯箱，例如

 $('a[rel=lightbox]').live('click', function(e){ e.preventDefault; $.fancybox({ href : $(this).attr('href') }); // OR $.colorbox({ href : $(this).attr('href') }); }); 

请注意，jQuery现在建议使用.on（）而不是.live（）。