Javascript 在my.click回调原因中触发click事件；超过最大调用堆栈大小；

我找不到任何可能的原因来解释为什么会发生这种情况。 我有一个按钮，打开一个引导弹出窗口。但是在打开模式之前，我需要修改一些变量，所以我在隐藏按钮上触发一个点击事件，打开引导模式。 HTML看起来像-

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

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

但这会产生

未捕获范围错误：超过最大调用堆栈大小

如果我将代码编辑为

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

模态永远开放和消失。 这里到底发生了什么？我过去也曾触发过点击事件，但从未遇到过这种情况。

---

提前感谢您的帮助。

我猜单击事件是无终止递归调用的。对于

打开模式

的点击事件，您有任何回调函数吗？如果是，请分享。

由于

打开模式

被包装在

可见按钮

中，触发点击

打开模式

相当于触发点击

可见按钮

。因此，当您单击可见按钮时，

可见按钮的onclick事件将被触发，intern再次单击
可见按钮，它将进入一个无限循环。
这是由于事件从子元素传播到父元素。当您单击
（子元素）时，它将事件传播给父元素

当父对象单击事件并单击子对象时，您已经绑定了该事件。所以在传播过程中，点击事件进入无限循环，所以您必须通过
e.preventDefault（）停止传播
或
返回false单击事件函数结束时

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

$('[data-target="#popup-modal"]').click(function(e){
   $("#popup-modal").modal();
   return false;
});

这将防止出现错误。错误的原因是您正在递归地单击同一父级。单独使用按钮和模式将解决此问题

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

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


看来是我的HTML导致了这里的问题。触发对子元素的单击也会导致对父元素的单击。这也会产生相同的行为。如果我想使用相同的HTML，我如何使其工作？不，我没有任何对open modal或Thank@Ravikiran kalal的回调。它帮助了我。