jQuery與fancybox使用觸發器（）導致堆棧溢出

Question

我想打開fancybox圖像庫（縮略圖）通過點擊與fancybox畫廊沒有真正相關的元素，所以我想要使用triger方法。

問題是，如果導致堆棧溢出，那麼使用更多的照片（8個圖庫，例如10個圖片/每個gal）。我在這裏找到了很少的答案，例如使用live（），bind（），stopPropagation（），stopImmediatePropagation（）等，但似乎沒有任何工作適合我。

HTML是這樣的：

<div id="thumb_1" class="fancy-thumb"> 
    <a class="fancybox-thumb" id="gal-1 rel="gal-1"><img src="./foo/bar.baz"/></a> 
    <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a> 
    <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a> 
    ......... 
    <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a> 
    <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a> 
    <another html elements absolute positioned such as labels etc> 
</div> 
......... 
<div id="thumb_10" class="fancy-thumb"> 
    <a class="fancybox-thumb" id="gal-10 rel="gal-10"><img src="./foo/bar.baz"/></a> 
    <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a> 
    <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a> 
    ......... 
    <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a> 
    <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a> 
    <another html elements absolute positioned such as labels etc> 
</div> 

和JS是這樣的：

// fancybox is initialized in after document ready 
$(".fancybox-thumb").fancybox(); 

// this function should trigger fancybox 
this.openGal(e){ 
    var gal_id = $(e.currentTarget).attr("id"); 
    $("#" + gal_id).trigger("click"); 
    return false; 
    // note that here I've tried almost everything found at stackoverflow 
    // but nothing seems to work 
} 

// listeren looks like this 
$(".fancy-thumb").click(function(e) {scope.openGal(e);}); 

請不要張貼這樣的答案，那就是應該這樣做在非標準方式，使用觸發器（ ）不是一個好主意。我需要使用trigger（）。

Answer 1

function openGal(e){ 
    var gal_id = $(e.currentTarget).attr("id"); 
    $("#" + gal_id).trigger("click"); //this was causing the following function to be called, resulting in an infinite loop 
    return false; 
} 

// by delegating down a level, we are at the elements we actually want to attack 
// the '>' operator selects child elements 
$(".fancy-thumb >").click(function(e) { 
    openGal(e); 
});​ 

http://jsfiddle.net/LsmVb/顯示瞭如何將警報正確調用，通過改變$(".fancy-thumb a")到$(".fancy-thumb")可以看到無限循環出現在哪裏。

你也會想把一個封閉的div標籤包裹在你的花哨的內容裏面，這將允許上面的操作符選擇它。如果您不想這樣做，那麼所有未包含在標籤中的文字都將無法點擊。