javascript - colorbox bind on live with elements' grouping 将不起作用

Question

我正在为画廊使用众所周知的优秀 jQuery Colorbox。部分图像正在使用 ajax 添加到页面中。我试图让 colorbox 绑定(bind)到页面上所有新的和现有的图像，并将它们组合在一起。现在，我只成功实现了两者之一。使用此代码，所有图像都很好地组合到一个 colorbox gallery 中，但是在向页面添加更多图像后(通过 ajax)，colorbox 根本没有绑定(bind)到它们:

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

使用此代码，在将更多图像添加到页面后，图像将绑定(bind)到 colorbox，但 rel 分组不起作用(甚至不适用于首次加载到页面的图像集):

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

我也试过这段代码，但它是一样的——图像很好地绑定(bind)到 colorbox，但作为单个图像，而不是作为 (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 的代码，我没有看到其他简单的方法来处理您的情况。