Question

我无法理解为什么会发生这种情况。我有一个按钮，打开一个bootstrap弹出窗口。但是在打开模态之前我需要改变一些变量，所以我在隐藏按钮上触发了一个click事件，打开了bootstrap模态。 HTML看起来像 -

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
      for (String permission : permissions) {
          int phoneStatePermission = Context.checkSelfPermission(permission);
          if (phoneStatePermission != PackageManager.PERMISSION_GRANTED) {

           }
      }
}

js代码就像 -

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

但这会产生

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

如果我将代码编辑为

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

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

Answer 1

当open-modal被visible-button包裹时，触发点击open-modal相当于触发点击visible-button。因此，当您点击可见按钮时，visible-button的onclick事件会被触发，实习生再次点击visible-button，然后进入无限循环。

Answer 2

这样可以防止出错。出错的原因是您以递归方式单击相同的父级。单独按下按钮和模态将解决问题。

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

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

Answer 3

我的猜测是点击事件被递归调用而没有结束。您对open-modal <span>的点击事件有任何回调功能吗？如果是，请分享。

Answer 4

由于从子元素到父元素的事件传播。当您点击<span>（子元素）时，它会将事件传播到父<div>。

当父母点击它时，你有绑定事件。所以在点击事件的推广中进入无限循环，所以你必须在点击事件函数结束时通过e.preventDefault();或return 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;
});

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

4 个答案: