jQuery触发点击无限循环

Question

为什么这段 jQuery 代码一上线就无限循环

//$('.'+triggerThisChild).trigger("click"); // this causes endless loop

未注释 FIDDLE is here

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

Working fiddle