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

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

例如

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
    });

}

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

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

解决方法

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

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

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

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

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