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

Question

我的 HTML 中有一个动态无序列表。当我加载文件时，一些列表项被添加到 . 页面加载时my的格式是这样的。

<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 时，它都会给我错误。任何形式的帮助将不胜感激

Answer 1

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

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

一旦你向 DOM 追加一个新节点，它就会不断地重新触发你的事件。这就是它超出调用堆栈的原因。

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

Answer 2

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

Answer 3

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

$('.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">');
});

更多信息this SO question.

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