Javascript colorbox与元素实时绑定'；分组赢了'；行不通

我正在使用众所周知的优秀jQuery颜色框作为图库。使用ajax将部分图像添加到页面中。我正在尝试将colorbox绑定到页面上所有新的和现有的图像，并将它们分组在一起。 现在，我成功地实现了这两个目标中的一个。 使用此代码，所有图像都可以很好地分组到一个colorbox库中，但在向页面添加更多图像（通过ajax）后，colorbox根本不会绑定到它们：

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

使用此代码，在向页面添加更多图像后，图像将绑定到colorbox，但rel分组不起作用（甚至不适用于第一次加载到页面的图像集）：

我也尝试过这段代码，但它是相同的-图像很好地绑定到colorbox，但作为单个图像，而不是（rel）库：

图像库的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>

//图3中的一些数据。。。


//图4中的一些数据。。。

---

有没有一种方法可以将这两者结合起来，这样colorbox就可以用于页面上的所有图像，也可以用于通过ajax添加的图像，并且可以将所有图像分组在一起？我做不到。我相信应该有一种方法可以做到这一点。

可能有效的方法是在加载新元素后重新初始化配色箱

换句话说，您必须执行以下操作：

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

ajax调用完成后

查看colorbox的代码，我看不到其他简单的方法来处理您的案例。

将此替换为$（'.colorbox'）.colorbox（）

我的解决方案

  // This is the trick. Initialize but don't open
  $('.colorbox').colorbox({open:false, rel:'gallery'});

  // Handle click event    
  $('.colorbox').live('click',function(e){
     $(this).colorbox({open:true, rel:'gallery'}); // now open colorbox
     return false;
  });

---

简单的想法和做得好-它只是与这个想法的工作。非常感谢！

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

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});

  // This is the trick. Initialize but don't open
  $('.colorbox').colorbox({open:false, rel:'gallery'});

  // Handle click event    
  $('.colorbox').live('click',function(e){
     $(this).colorbox({open:true, rel:'gallery'}); // now open colorbox
     return false;
  });