触发点击时超出最大调用堆栈大小

Question

我真的很想做一些简单的事情。单击某个元素时，我触发了对另一个元素的单击，但我在控制台上收到以下错误。

Uncaught RangeError: Maximum call stack size exceeded

我的代码如下；

$('body').on('click', '.actual-click-element', function(event) { 
    $('.trigger-click-element').trigger('click');
    event.preventDefault(); 
});

我想知道为什么会收到此错误，而且我不明白这是如何递归的。有什么想法吗？

Answer 1

当然是因为 .trigger-click-element 是 .actual-click-element 的后代...

为了避免递归调用，你可以使用 jq triggerHandler():

Events triggered with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.

$('body').on('click', '.actual-click-element', function(event) { 
    $('.trigger-click-element').triggerHandler('click');
    event.preventDefault(); 
});

现在如果 $('.trigger-click-element') returns 不止一个元素，你可以使用：

$('.trigger-click-element').each(function(){$(this).triggerHandler('click');});

触发点击时超出最大调用堆栈大小

Maximum call stack size exceeded on trigger click

javascript

jquery

jquery-events