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

Question

我无法理解为什么会发生这种情况.我有一个按钮,打开一个bootstrap弹出窗口.但是在打开模态之前我需要改变一些变量,所以我在隐藏按钮上触发了一个click事件,打开了bootstrap模态.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');
});

但这会产生

未捕获RangeError:超出最大调用堆栈大小

如果我编辑代码

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

模态永远保持开放和消失.这里到底发生了什么？我也曾在过去触发了点击事件,但从未遇到过这种情况.我在这里先向您的帮助表示感谢.

Answer 1

正如open-modal包裹在内部visible-button,触发点击open-modal相当于触发点击visible-button.因此,当您单击可见按钮时,visible-button会触发onclick事件触发哪个实习生visible-button再次点击,并进入无限循环.