javascript - 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>

当我单击链接或直接单击输入时，它会在控制台中不断打印超过最大调用堆栈大小并且页面被阻止。

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

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

Answer 1

首先:

您的 HTML 无效。 a、button、label 等交互式元素不能包含交互式内容。 您的 HTML 不能保持这样.

<小时/>

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

click 事件默认在 DOM 中冒泡，因此您的程序化

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

在该输入上创建一个click事件然后冒泡并触发$('.link-check').on上的监听器(“click”，然后单击内部输入，然后触发您的点击监听器，等等啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊…… 你明白了。

<小时/>

再次强调:你不能使用这样的 HTML。