首页 文章

未捕获RangeError：超出最大调用堆栈大小

提问于
浏览 次
0

给出以下jQuery函数 .

$(document).on("click", ".subMenu>a", function(event) {

    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").trigger('click');
});

当单击 <li> 内的 <span> 时，将调用此函数 .

<li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent subMenu" role="menuitem" aria-haspopup="true">

    <a href="../public_resources/Category.jsf?id=5" class="ui-menuitem-link ui-submenu-link ui-corner-all" tabindex="-1">
        <span class="ui-menuitem-icon ui-icon ui-icon-contact"></span><span class="ui-menuitem-text">Occassion</span>
    </a>

</li>

可以看出，给定的jQuery函数由CSS类 subMenu （在 <li> 中）映射 . 当调用此函数时（在单击 <li> 标记所包含的区域时调用此函数），锚点标记在此函数中被赋予所需的URL，这反过来会触发click事件，导致同一函数被调用一次再次 - 最终导致无限递归与以下错误 .

Uncaught RangeError：超出最大调用堆栈大小

有没有办法避免这种递归，可能是以某种方式重写函数？

这里给出的HTML代码是由UI框架生成的，它不太可能触及它 .

我可以使用 window.location 而不是使用 .trigger('click') 但是当用户通过按住ctrl键单击子菜单时，应该在新选项卡中打开页面 . 使用 window.location 不会发生这种情况 .

javascript jquery html css

4 回答

  • 0

    使用javascript触发点击它将绕过处理程序：

    $(this).closest("a").attr("href", "www.google.com")[0].click();
    回复于
  • 0

    试试这个：

    var a=0;
$(document).on("click", ".subMenu>a", function(event) {
    a++;
    if(a<=1){
    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").trigger('click');
    }else{
        a--;
    }
});

    如果您不想涉及全局变量，可以使用：

    $(document).on("click", ".subMenu>a", function(event) {
    if($(this).attr('data-clicked')) return true;
    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").attr('data-clicked',true).trigger('click');
});
    回复于
  • 0

    使用 .trigger ，您可以传递参数 . 尝试这样的事情：

    $(document).on("click", ".subMenu>a", function(event, _ISTRIGGER_) {
    if(_ISTRIGGER_) return;

    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5").trigger('click', true);
});

    但请注意， .trigger 不会激活默认行为 . 干

    $(this).closest("a").attr("href", "../public_resources/Category.jsf?id=5")[0].click();

    会激活它 .

    回复于
  • 2

    如果单击<li>中的<span>，则会调用此函数 .

    不，它不是，这是你的代码中的致命缺陷 .

    $(document).on("click", ".subMenu>a", function(event) {

    单击 <a> 时调用代码，而不是 <span> . 由于您触发了对链接的单击，因此再次调用事件处理程序 . 然后再次 . 再次，直到你的堆栈空间不足 . 堆栈溢出！

    要修复，只需修复您的选择器： .subMenu>a>span

    回复于

相关问题