JQuery click() - 超出最大调用堆栈大小答案

【问题标题】：JQuery click() - Maximum call stack size exceededJQuery click() - 超出最大调用堆栈大小
【发布时间】：2019-07-29 13:39:50
【问题描述】：

我有这个 html：

$(function() {
    $('.link-check').on("click", function(e){ 
        $(this).find("input").click();
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="link-check">
        <label>
            <input type="checkbox"> Check
        </label>
    </a>

当我点击一个链接或直接点击一个输入时，它会不断地在控制台中打印Maximum call stack size exceeded 并且页面被阻止。

如果我在控制台中执行$('.link-check') 和$('.link-check').find("input")，在这两种情况下它都只返回一个元素。

为什么会出现这个错误？

【问题讨论】：

您的 HTML 无效。 a、button、label 等交互元素不能有交互内容。
Triggering click event inside my .click callback causes "Maximum call stack size exceeded"的可能重复
@HereticMonkey 类似于那个副本，但更糟。

标签： javascript jquery

【解决方案1】：

首先：

您的 HTML 无效。 a、button、label 等交互式元素不能有交互式内容。 您的 HTML 不能保持这种状态。

关于您的问题：恭喜，您刚刚创建了（希望如此）第一个无限循环！

click 事件默认冒泡 DOM，所以你的程序化

$(this).find("input").click();

在input 上创建一个click 事件然后冒泡并在$('.link-check').on("click" 上触发您的侦听器，然后点击内部input，然后触发您的点击侦听器，等等等等等等等等等等开上开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开开不断地不断地不断地不断地不断地...... 你明白了。

再次重申：你不能拥有这样的 HTML。

【讨论】：

【解决方案2】：

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

请试试这个代码。

我认为事件冒泡是这里的问题。

我希望它会有所帮助。

【讨论】：

【解决方案3】：

因为您在 onClick 函数中调用点击，所以会一次又一次地触发该函数...

它被称为递归，是一个有效的结构，但你需要设置一些停止条件，否则你的代码将永远运行，直到你的内存出现堆栈溢出；

见：https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f/

【讨论】：