点击jQuery-UI对话框按钮时为何出现栈溢出与类型错误？

嘿，我来帮你拆解下这两个错误的根源，以及对应的修复方法～

1. 「Maximum call stack size exceeded」栈溢出错误 #

你在Dialog的buttons配置里犯了一个常见的小错误：给OK按钮直接赋值了ChangePassword(userId, $('#password').val(), $('#confirm_password').val())——这会导致在创建Dialog的瞬间，这个函数就被立即执行了，而不是等到用户点击OK按钮才触发。

如果ChangePassword函数内部有任何会触发重新创建Dialog、或者重复调用自身的逻辑（比如密码校验失败后重新打开Dialog），就会陷入无限递归循环，最终把调用栈撑爆，出现栈溢出错误。

2. 「TypeError」类型错误 #

同样因为函数被提前执行，此时Dialog还处于未打开状态（autoOpen: false），页面上可能根本不存在#password和#confirm_password这两个输入框，或者它们还没被渲染到DOM中。这时候$('#password').val()会返回undefined，把undefined传给ChangePassword函数后，函数里的密码校验、加密等操作自然会触发类型错误。

你需要把OK按钮的处理改成回调函数形式，只有当用户点击按钮时才执行ChangePassword，同时建议用Dialog的上下文来查找输入框，避免全局选择器的潜在问题：

function MakeChangePasswordDialog(userId) { 
  var dialog = $('#dialog-form').dialog({ 
    autoOpen: false, 
    height: 400, 
    width: 350, 
    modal: false, 
    buttons: { 
      // 改成匿名回调函数，点击按钮时才执行内部逻辑
      'OK': function() {
        // 用$(this)指代当前Dialog容器，查找内部的输入框，确保选择准确
        var password = $(this).find('#password').val();
        var confirmPassword = $(this).find('#confirm_password').val();
        
        // 调用修改密码函数
        ChangePassword(userId, password, confirmPassword);
        
        // 如果需要修改成功后关闭对话框，可以在这里添加逻辑
        // 比如AJAX请求成功后再关闭：
        // $.post('/change-password', {id: userId, pwd: password}, function(res) {
        //   if (res.success) $(this).dialog('close');
        // });
      },
      'Cancel': function() { 
        $(this).dialog('close'); 
      }
    }
  });
  
  // 最后记得打开对话框（如果需要的话）
  dialog.dialog('open');
}

额外小提示：如果ChangePassword是异步操作（比如调用后端接口），建议在异步操作完成后再处理对话框的关闭逻辑，避免用户还没看到修改结果，对话框就提前关闭了。

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