使用元素分组的livebox绑定将无法正常工作

Question

我正在使用着名且优秀的jQuery Colorbox作为图库.部分图像正在使用ajax添加到页面中.我正在尝试将colorbox绑定到页面上的所有新图像和现有图像,并将所有图像组合在一起.现在,我成功地只实现了两者中的一个.使用此代码,所有图像都可以很好地组合到一个颜色框库中,但在向页面添加更多图像后(通过ajax),颜色框根本没有绑定到它们:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

使用此代码,在向页面添加更多图像后,图像被绑定到彩色框,但是rel分组不起作用(甚至不是首先加载到页面的图像集):

$('a.exhibition').live('click', function() {
    $.fn.colorbox({
        inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true,      
        rel:"hpexhibition"
    });
    return false;
});

我也尝试过这段代码,但它是一样的 - 图像与彩盒相关联,但作为单个图像,而不是(rel)图库:

$("ul#home-exhibition").on("click", "a[rel='hpexhibition']", function (event) {
    event.preventDefault();
        $.colorbox({
            inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true, 
        rel:"hpexhibition"                
         });
});

我的图像库的html标记是这样的:

<ul id="home-exhibition">       
    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="3" href="#artitem-cb-details-3">
            <img src="path/to/image53.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-3" class="artitem-cb">
            //Some data of image 3 here...
          </div>    
        </div>
    </li>

    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="4" href="#artitem-cb-details-4">
            <img src="path/to/image4.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-4" class="artitem-cb">
            //Some data of image 4 here...
          </div>    
        </div>
    </li>

    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

有没有办法将这两个结合起来,这样colorbox可以用于页面上的所有图像 - 也就是那些通过ajax添加的图像 - 并且还将所有图像组合在一起？我不能做这个工作.我相信应该有办法让这个工作.

Answer 1

可能有效的方法需要您在加载新元素后重新初始化您的颜色框.

换句话说,你必须这样做:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

在ajax调用完成后.

看看colorbox的代码,我没有看到其他简单的方法来处理你的情况.