如何使用jQuery模拟点击按钮在alert关闭后触发显示远程modal弹窗

问题根因 #

• 当前使用的Bootstrap 5版本通过jQuery触发隐藏的登录按钮点击，无法稳定唤起data-bs-toggle绑定的模态框
• 原有逻辑依赖汉堡菜单内的登录按钮状态，按钮隐藏时部分场景下点击事件不会被Bootstrap捕获

修复方案 #

直接修改login_first函数，调用Bootstrap 5原生API主动唤起模态框，无需触发登录按钮点击，兼容性更稳定：

function login_first() {
  alert('请先登录！');
  // 获取登录按钮上配置的远程表单地址
  const remoteUrl = document.querySelector('#login_btn').dataset.remote;
  // 加载登录表单到模态框
  $('#xModal .modal-body').load(remoteUrl);
  // 唤起登录模态框
  const loginModal = new bootstrap.Modal(document.getElementById('xModal'));
  loginModal.show();
}

兼容原有逻辑的备选方案 #

如果需要保留原有模态框的show.bs.modal事件绑定逻辑，也可以手动触发对应事件，效果和点击登录按钮完全一致：

function login_first() {
  alert('请先登录！');
  const loginBtn = $('#login_btn')[0];
  const modalEl = document.getElementById('xModal');
  // 手动触发show.bs.modal事件，传入关联的登录按钮保证原有加载逻辑正常运行
  const showEvent = new Event('show.bs.modal', { bubbles: true, cancelable: true });
  showEvent.relatedTarget = loginBtn;
  modalEl.dispatchEvent(showEvent);
  // 唤起模态框
  const loginModal = new bootstrap.Modal(modalEl);
  loginModal.show();
}

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