开发者问题收集

在我的 .click 回调中触发点击事件导致“超出最大调用堆栈大小”

2016-09-16
4143

我无法找到发生这种情况的任何可能原因。 我有一个按钮可以打开引导弹出窗口。但在打开模式之前,我需要更改一些变量,因此我在隐藏按钮上触发了单击事件,该按钮打开了引导模式。 HTML 看起来像-

<div id="visible-button">
   <span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span>
</div>

而 js 代码类似于-

$('#visible-button').click(function(){
   //perform data manipulation
   $('#open-modal').trigger('click');
});

但这会产生

Uncaught RangeError: Maximum call stack size exceeded

如果我将代码编辑为

$('#visible-button').click(function(){
   //perform data manipulation
   setTimeout(function(){
     $('#open-modal').trigger('click');
   }, 500);
});

模式会一直打开并永远消失。 这里到底发生了什么?我过去也触发过点击事件,但从未遇到过这种情况。 提前感谢您的帮助。

3个回答

由于 open-modal 被包裹在 visible-button 中,触发对 open-modal 的点击等同于触发对 visible-button 的点击。因此,当您点击可见按钮时,会触发 visible-button 的 onclick 事件,从而触发该事件,进而再次点击 visible-button ,并陷入无限循环。

Ravikiran kalal
2016-09-16

这将防止出现错误。出现错误的原因是您递归点击了同一个父级。将按钮和模式分开将解决该问题。

<div id="visible-button"></div>

<span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span>
Pranesh Ravi
2016-09-16

我猜想点击事件是无休止地递归调用的。您是否有针对 open-modal <span> 的点击事件的回调函数?如果有,请分享。

ashok93
2016-09-16