jQuery click() - 超过最大呼叫堆栈大小

Question

我有这个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")，则在两种情况下仅返回一个元素。

为什么我会收到这个错误？

Answer 1

首先：

您的HTML无效。a，button，label等交互式元素不能具有交互式内容。 您的html不能像那样保持。

---

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

click事件默认情况下 bubble 向上dom，因此您的程序化

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

在该 input 上创建一个 click事件，然后在 $('.link-check').on("click" 上触发您的侦听器，然后单击内部input，然后触发您的单击侦听器，等等，等等，等等，等等，等等，等等，等等，等等，等等，等等，等等，等等，又On and On On nos on和nocker在... 上，您明白了。

---

再次：您不能像那样的html。

Answer 2

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

请尝试此代码。

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

我希望它会有所帮助。

Answer 3

，因为您正在调用单击onclick函数的单击，因此一次又一次地触发该功能...

它称为递归，是一个有效的结构，但是您需要放置一些停止条件，否则您的代码将永远运行。

请参阅：https：//www.freecodecamp.org/news/recursion-in-javascript-1608032c7aa1f/