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

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():

用.triggerHandler()触发的事件不会冒泡DOM层次结构; 如果它们不是直接由目标元素处理的,它们什么都不做.

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

现在,如果$('.trigger-click-element')返回多个元素,您可以使用:

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