开发者问题收集

未捕获的 RangeError：超出最大调用堆栈大小。Jquery 错误

2020-08-25
2762
javascript jquery

我的 HTML 中有一个动态无序列表。当我加载文件时，会添加一些列表项。 页面加载时，我的格式如下。 

<ul class="ui-front">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
</ul>

现在，我正在运行一个函数，当页面加载时，列表项的第一个子项被删除，我正尝试在列表项中添加我的自定义 HTML。这是我的代码 

$('.ui-front').on('DOMNodeInserted', 'li', function(e) {
    var arjuna="e.target.firstElementChild.innerHTML";
    e.target.removeChild(e.target.childNodes[0]);


    $(e.target).append('<hr style="margin-top:7px;margin-bottom:7px">');
});

根据此函数，当插入新列表项时，此方法会调用。但这会给我一个错误 

Uncaught RangeError: Maximum call stack size exceeded

当我删除函数 .append 时。一切正常，意味着元素被删除，但每当我添加 .append 时，它都会给我一个错误。任何帮助都将不胜感激

3个回答

您收到该错误是因为您的事件触发于：

$('.ui-front').on('DOMNodeInserted', 'li', function(e)

一旦您将新节点附加到 DOM，它将继续重新触发您的事件。这就是它超出调用堆栈的原因。

“DOMNodeInserted 事件类似于 DOMNodeInsertedIntoDocument 事件，但它发生在将节点添加到元素时。”

Trevor Thompson
2020-08-25

$(e.target).append 触发 DOMNodeInserted 事件。这是一个无限循环。

Alex Mcp
2020-08-25

从其他答案中可以清楚地看出您的问题原因，针对您的用例，一个可能的解决方案是在第一次执行后删除事件侦听器（如果您确实只希望事件处理程序执行一次）。类似： 

$('.ui-front').on('DOMNodeInserted', 'li', function(e) {
    var arjuna="e.target.firstElementChild.innerHTML";
    e.target.removeChild(e.target.childNodes[0]);

    //disables the event handler after first execution
    $('.ui-front').off('DOMNodeInserted');

    //now this won't fire the event anymore :)
    $(e.target).append('<hr style="margin-top:7px;margin-bottom:7px">');
});

更多信息请参阅 这个 SO 问题。

编辑： 我不太确定您想要的输出，但如果您所做的只是在目标 <li> 下方插入一条水平线，那么这绝对可以仅使用 CSS 来实现（想想 border-bottom 、 text-decoration: underline 或类似内容）。

Anis R.
2020-08-25