在动态添加的内容上激活灯箱 [英] activate lightbox on dynamically added content

问题描述

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

I'm developing a little portfolio where I can choose a category and when I click it, the content (thumbnails) of that category will be shown (this is via an array).

例如

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

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

At first the site shows the content of all categories and when I click a thumbnail it activates lightbox, however if I choose a category and then press one of the remaining thumbnails is simply leads to the image and does not open the image with lightbox.

这是缩略图的外观在页面的初始加载中：

This is how the thumbnails look like on the initial load of the page:

<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还在那里）。

When a category is selected it removes the content within the div and replaces it by other content e.g. exactly the same content. (so the rel="lightbox" is still there).

如果有人可以帮助我，我会喜欢它（我正在使用jquery btw）。

If anyone could help me out with this one I would love it (I'm using jquery btw).

回复后编辑Alex Sexton：

EDIT after response Alex Sexton:

$(".thumbnaila").live("mouseover", function(){
    activateLightbox($(this));});

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

}

但现在当我选择一个分类，并选择一个缩略图，它加载正确的灯箱，但也加载一个空的灯箱上面我想要的，你可以看到：

but now when I choose a categorie and select a thumbnail it loads the right lightbox but also loads an empty lightbox above the one I want as you can see:

任何人都知道是什么原因造成的？

Anyone know what's causing this?

推荐答案

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

If you are binding the links with a regular event handler:

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

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

Then any new content that is added after the bind won't be captured.

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

You can either rerun the bind when you change out the content, or more simply use jQuery's event delegation to attach the handler:

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

这篇关于在动态添加的内容上激活灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！