colorbox綁定元素的分組將不起作用

Question

我使用衆所周知和良好的jQuery Colorbox的畫廊。部分圖像正在通過ajax添加到頁面中。我嘗試將colorbox綁定到頁面上的所有新圖像和現有圖像，並將它們全部組合在一起。 現在，我只能成功實現其中的一個。 有了這個代碼，所有圖像以及組合在一起，以一個顏色框畫廊，但（通過AJAX）的網頁添加更多圖片後，顏色框沒有被綁定到他們都：

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

有了這個代碼，圖像被綁定到顏色框添加更多圖片到頁面後，但相對分組不工作（甚至沒有圖像組第一次被加載到頁面）：

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

我也試過這個代碼，但它是相同的 - 圖像很好地綁定到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> 

有沒有辦法來論文結合兩個，使顏色框將所有圖像的工作網頁上 - 也就是那些通過AJAX添加 - 還會把他們聚集在一起？我不能完成這項工作。我相信應該有辦法讓這個工作。

Answer 1

該方法可能會工作將需要您加載新元素後重新初始化您的colorbox。

換句話說，你必須做的：

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

後Ajax調用完成。

看着colorbox的代碼，我沒有看到其他簡單的方法來處理你的情況。

Answer 2

把這個，而不是$（'。colorbox'）。colorbox（）;

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

Answer 3

我的解決方案

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