2009-10-20 153 views
2

我正在開發一個小的投資組合在那裏我可以選擇一個類別,當我點擊它,該類別的內容(縮略圖)將顯示(這是通過一個數組)收藏。激活動態添加內容

例如

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

起初,現場展示的所有類別的內容,當我點擊縮略圖它激活收藏夾,但是如果讓我選擇一個類別,然後按剩下的一個縮略圖僅僅是導致圖像和不用燈箱打開圖像。

這是縮略圖如何看起來像在頁面的初始負載:

<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」仍然存在)。

如果有人可以幫助我走出這一個我喜歡它(我使用jQuery的BTW)。

響應亞歷克斯·塞克斯頓後編輯:

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

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

}

但現在,當我選擇一個類別,並選擇縮略圖加載正確的收藏夾,但同時也被裝入一個我想與上述空收藏夾你可以看到:

enter image description here

任何人都知道是什麼引起的?

回答

2

如果綁定一個普通的事件處理程序的鏈接:

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

然後就是綁定後添加任何新的內容不會被捕獲。

您可以重新運行綁定,當您更改了的內容,或者更簡單地使用jQuery的事件代表團附加處理程序:

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

好的,謝謝這有一點幫助,它知道每次觸發一個事件(也是動態添加的元素),但它現在加載2倍的燈箱。任何想法如何解決這個問題? – Ayrton 2009-10-21 10:24:39

+0

聽起來像你的點擊事件綁定莫名其妙的兩倍。確保你不使用正常的點擊綁定以及活動綁定。 – 2009-10-21 10:32:03

0

你可以叫很多jQuery的燈箱與$ .lightboxName(),例如

$('a[rel=lightbox]').live('click', function(e){ 
    e.preventDefault; 
    $.fancybox({ href : $(this).attr('href') }); 
    // OR $.colorbox({ href : $(this).attr('href') }); 
}); 

請注意,jQuery現在建議使用.on()而不是.live()。