模态弹窗结合AJAX时下拉按钮每隔一次才生效的修复请求

兄弟，我太懂这种隔一次才生效的玄学问题了！你这情况十有八九是动态内容的事件绑定失效导致的——毕竟你的弹窗是通过AJAX加载的（从你提到的showInPopup方法能看出来），第一次弹窗关闭后，给下拉按钮绑定的事件可能跟着弹窗内容被销毁了，第二次打开弹窗重新加载内容时，事件又被重新绑定，所以才会出现“第一次点不动，第二次正常”的奇怪现象。

给你几个亲测有效的修复方案，你可以根据自己的代码情况选：

方案1：用事件委托（最推荐，一劳永逸） #

别直接给下拉按钮绑事件，而是把事件绑定到页面初始化时就存在的静态父容器上（比如弹窗的外层框架，只要这个容器从页面加载就一直在DOM里就行），利用事件冒泡的特性，不管弹窗内容怎么销毁重建，点击事件都能正常触发。

比如原来你可能写的是这种直接绑定的代码：

$('.dropdown-btn').click(function() {
  // 你的下拉展开/收起逻辑
});

改成事件委托的写法：

// 假设#static-modal-wrapper是页面一开始就有的弹窗外层容器
$('#static-modal-wrapper').on('click', '.dropdown-btn', function() {
  // 原来的下拉逻辑直接搬过来就行
  $(this).siblings('.dropdown-menu').toggleClass('active');
});

这样不管弹窗加载多少次，下拉按钮的点击事件都能稳稳触发。

方案2：弹窗加载完成后重新初始化事件 #

如果你的showInPopup方法是打开弹窗时通过AJAX拉取内容，那可以在内容插入弹窗后，手动重新初始化下拉按钮的事件——记得先移除旧的事件，避免重复绑定导致多次触发：

// 你的弹窗打开方法
showInPopup = function(url, title) {
  $.ajax({
    url: url,
    method: 'GET',
    success: function(data) {
      // 把AJAX返回的内容插入弹窗
      $('#modal-body').html(data);
      // 内容插入后，立刻初始化下拉按钮
      reinitDropdown();
    }
  });
};

// 单独封装下拉初始化的函数，方便复用
function reinitDropdown() {
  // 先移除旧的点击事件，再绑定新的
  $('.dropdown-btn').off('click').on('click', function() {
    $(this).next('.dropdown-menu').toggle();
  });
}

这种方式适合你需要每次弹窗加载不同内容的场景，每次加载完都重新绑定，就不会出现事件丢失的问题。

方案3：检查弹窗的销毁逻辑（针对用UI框架的情况） #

如果你用的是Bootstrap Modal这类现成的弹窗组件，要注意关闭弹窗时的默认行为——有些框架会把弹窗内容从DOM中移除，而不是单纯隐藏，这时候第一次关闭后，原来的事件就跟着DOM元素被删掉了。

这时候可以改成隐藏弹窗而非销毁内容，或者利用框架的弹窗事件，在弹窗显示后重新初始化下拉：

// 假设用的是Bootstrap Modal
$('#myModal').on('shown.bs.modal', function() {
  // 弹窗完全显示后，初始化下拉按钮
  reinitDropdown();
});

// 关闭弹窗时如果需要清空内容，不要直接移除容器，而是清空内容即可
$('#myModal').on('hidden.bs.modal', function() {
  $('#modal-body').empty(); // 清空内容，下次打开重新加载
});

备注：内容来源于stack exchange，提问作者2033