javascript - jQuery 函数陷入循环

Question

我有一个带有链接的简单 div:

<div class="mhButton">
    <a href="#" id="RegisterAnimal"><span class="icon-checkmark"></span>&nbsp;&nbsp;Register Animal</a>
</div>

我有一个函数，只要单击“div.mhButton”就会触发该函数。此函数应找到“div.mhButton”子“a”并单击它。

    $(".mhButton").on('click', function () {
        var a = $(this).find("a").text();
        console.log(a);
        $(this).find("a").click();
    });

这行得通，但是，我陷入了一个运行了 639 次的循环。

我不明白为什么这运行了 X 次，然后继续没有错误。

有没有人有解决方案来防止这种情况发生？以及为什么会发生这种情况的解释？

注意* 控制台一次又一次地记录同一个按钮。

Answer 1

因为按钮中嵌入了 a 标签，所以您不断地重新触发事件。事件会冒泡，所以 anchor 会被点击，然后是它的父级。它一直在运行，直到浏览器厌倦了运行它然后才停止。该方法实际上并没有做任何事情，这可能是您没有看到任何问题的原因。您可以通过几种方式实现您的目标:

$(".mhButton").click(function () {
    $(this).off('click'); // turn the click handler off in the handler itself. 
    var a = $(this).find("a").text();
    console.log(a);
    $(this).find("a").click();
});

如果你这样做，那么你最终只能触发一次事件。

或者:

$(".mhButton").click(function (e) {
    a = $(this).find("a").text();
    console.log(a);
    $(this).find("a").click();
});

$("#RegisterAnimal").click(function (e) {
    e.stopPropagation(); // prevent the anchor from re-firing the button click
});

或者，您可以将链接样式设置为看起来像一个按钮，同时避免不必要的点击处理程序。