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

Question

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

e.g。

photography[0] = <a href="..." rel="lightbox" /><img ...  /></a>
photography[1] = <a href="..." rel="lightbox" /><img ...  /></a>

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

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

<div><a title="..." rel="lightbox" href="http://...yellow-brick-road.jpg" class="thumbnaila"> <img class="thumbnail " alt="" src="http://...yellow-brick-road.jpg" /></a>

当选择某个类别时，它会移除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（）。