jQuery函数陷入循环

jQuery Function Stuck in Loop

本文关键字：循环 函数 jQuery      更新时间：2023-09-26

我有一个简单的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次，然后继续运行而没有错误。

有人能解决如何防止这种情况吗？并解释为什么会发生这种情况？

注意*控制台正在一次又一次地记录相同的按钮。

由于a标记嵌入在按钮中，因此您将不断重新启动事件。事件将弹出，因此将单击锚点，然后单击其父锚点。它一直在运行，直到浏览器厌倦了运行它，然后它就停止了。该方法实际上并没有起到任何作用，这可能是你没有看到任何问题的原因。您可以通过以下几种方式实现目标：

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

另外，您可以将链接样式设置为类似按钮，并避免不必要的单击处理程序。

调用$(this).find("a").click();时，事件将冒泡到div.mhButton标记，并导致再次调用处理程序。它运行大约500次的原因是因为它在堆栈溢出时停止，它不会继续

您可以通过检查点击是否是<a>标签本身来防止它，在这种情况下不调用click()

工作示例：http://jsfiddle.net/mendesjuan/zdkrhh42/

注意关于已接受的答案

Bic的第二个答案几乎奏效，我的是一种不同的方法，副作用更少。调用stopPropagation的主要问题是，在这种情况下，整个文档上可能有一些处理程序不会被解雇。常见的情况是，当您单击页面上的其他位置时，菜单或对话框应该隐藏。stopPropagation方法将防止他们单击您的按钮时隐藏菜单。

$(".mhButton").click(function (e) {       
    // Only run this handler if the click was on the div, not the link itself 
    if ( $(e.target).is('a, a *') ) {
        return;
    }
    var a = $(this).find("a").text();
    $(this).find("a").click();
});
相关文章：