jquery - jQuery触发点击无限循环

Question

为什么这个 jQuery 代码在行后就无休止地循环

//$('.'+triggerThisChild).trigger("click"); // 这会导致无限循环

未注释FIDDLE 在这里

jQuery代码：

$('a.touchNav').on('click touchend', function (e) {
    var fancy = this.className.indexOf('fancy') != -1;
    var target = $(this).attr('target') == '_blank' ? true : false;
    if (fancy) {
        var triggerThisChild = $(this).children('span').attr('class');
        alert(triggerThisChild);
        e.stopPropagation();
        //$('.'+triggerThisChild).trigger("click"); // this causes endless loop
        //return false;
    } else if (target) {
        window.open(this.href,target);
        return false;
    } else {
       window.location = this.href;
       return false;
    }
});

$(".showFancyBox").fancybox({
    "width" : "75%",
    "height" : 800,
    "transitionIn" : "none",
    "transitionOut" : "none",
    "type" : "iframe",
    'href' : "http://www.google.com"
});

HTML：

<li>
<a class="touchNav" href="http://www.google.com" target="_blank">
    Nav Point 1
</a>
</li>
<li>
<a class="touchNav" href="http://www.stackoverflow.com" target="_blank">
    Nav Point 2
</a>
</li>
<li>
<a class="fancy touchNav" href="#">
    <span class="showFancy0" style="display:none;"></span>
    Nav Point 3
</a>
</li>

Answer 1

上的点击事件.showFancy0冒泡到父级a，整个事情再次运行。

添加此代码以阻止它发生...

$(".showFancy0").on("click", function(e) {
    e.stopPropagation();
});

工作小提琴

Answer 2

您在元素的子元素上触发的click事件将冒泡，并再次触发click您放置在元素本身上的回调。

在您显示的代码中，没有什么可以阻止单击事件从'.'+triggerThisChild元素冒泡。

我不会触发点击事件，而是将相关代码放在一个单独的函数中，并从两个处理程序中调用该函数。例如：

而不是 ：

$('.showFancy0').on('click', function(e) {
       //code to display fancybox
});

$('a.touchNav').on('click touchend', function(e){
     if (conditions) {
        $('.showFancy0').trigger('click');
     }
});

写 ：

function showFancyBox(/* any arguments you need */) {
   //code to show fancybox
}

$('.showFancy0').on('click', function(e) {
       showFancyBox(/* get the arguments and pass them */);
});

$('a.touchNav').on('click touchend', function(e) {
    if (conditions) {
       showFancyBox(/* get the arguments and pass them */);
    }
});

Answer 3

您正在触发 onClick 函数内的单击事件。因此，每当您单击触发该函数的元素时，它实际上是一遍又一遍地调用相同的函数。