使用Materialize CSS+jQuery从模态框打开模态框触发栈溢出错误

嘿，我之前也踩过这个坑！你碰到的Maximum call stack size exceeded错误，本质是模态框嵌套初始化引发的无限递归，具体原因和修复方法我给你拆解清楚：

问题根源 #

你用$('.modal').modal();一次性初始化所有带.modal类的元素时，如果某个模态框的DOM结构嵌套在另一个模态框内部（比如signup_modal里包含了另一个模态框的HTML代码），Materialize在初始化过程中会递归检测子元素里的模态框，反复触发初始化逻辑，最终把调用栈撑爆。

修复方案 #

1. 调整DOM结构（最推荐的根本解决办法）

Materialize的模态框设计上不支持嵌套，所以把所有模态框都移到body标签的直接子节点下，保持同级结构，不要互相嵌套：

<!-- 正确示例：所有模态框都在body下，平级排列 -->
<div id="signup_modal" class="modal">
  <div class="modal-content">
    <!-- 这里放打开其他模态框的按钮 -->
    <a class="waves-effect waves-light btn" href="#login_modal">已有账号？去登录</a>
  </div>
</div>

<!-- 登录模态框和注册模态框平级，不在任何模态框内部 -->
<div id="login_modal" class="modal">
  <div class="modal-content">
    <p>登录表单内容...</p>
  </div>
</div>

2. 逐个初始化模态框（避免批量选择的递归问题）

如果暂时没法调整DOM结构，可以放弃批量初始化，改为单独初始化每个模态框，这样能避免递归触发：

$(document).ready(function () {
  // 逐个指定模态框ID初始化，而不是选中所有.modal
  $('#signup_modal').modal();
  $('#login_modal').modal();
});

3. 切换模态框时先关闭当前模态框

打开新模态框前，手动关闭当前的，并且等待关闭动画完成再打开新的，避免两个模态框的事件逻辑冲突：

// 给切换按钮绑定自定义事件
$('.switch-to-login').on('click', function() {
  // 先关闭当前模态框
  $('#signup_modal').modal('close');
  // 等待Materialize的关闭动画（默认300ms）完成后再打开新的
  setTimeout(() => {
    $('#login_modal').modal('open');
  }, 300);
});

总结 #

最稳妥的还是第一种方法，保持模态框的平级DOM结构——Materialize的模态框本来就不是为嵌套场景设计的，这样能从根源避免这类递归问题。

内容的提问来源于stack exchange，提问作者CodeHip