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标记嵌入在按钮中，因此您将不断重新触发该事件。事件将冒出来，因此锚点将被点击，然后是其父点。它一直在运行，直到浏览器厌倦了运行它然后它才停止。该方法实际上并没有做任何可能导致您没有遇到任何问题的原因。您可以通过以下几种方式实现目标：

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

另外，您可以将链接设置为看起来像一个按钮，并避免使用不必要的点击处理程序。

Answer 2

当您致电$(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();
});

jQuery函数被困在循环中

2 个答案: