带有fancybox的jQuery使用trigger（）导致堆栈溢出

Question

我试图通过单击与fancybox 画廊无关的元素来打开fancybox 图片库（带有缩略图），所以我想使用triger 方法。

问题是，如果照片数量较多（例如 8 个画廊，每个 gal 有 10 张照片），则会导致堆栈溢出。我在这里找到的答案很少，例如使用 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() 不是一个好主意。我需要使用 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 标签，这将允许上述操作员选择它。如果您不想这样做，则所有未包含在标签中的文本都将无法点击。