JavaScript实现按钮单次点击：解决模态框重复提交确认请求问题

嘿，我来帮你搞定这个重发邀请模态框点击确认触发多次请求的问题。这种情况十有八九是重复绑定了点击事件导致的——每次打开模态框都给Confirm按钮绑一遍事件，却没在关闭时解绑，结果点一次就触发了之前所有绑定的事件。下面给你几个靠谱的解决方案：

1. 用事件委托代替直接绑定（最推荐） #

把点击事件绑定到父级元素或者document上，只绑定一次，彻底避免重复绑定的问题。首先给你的Confirm按钮加个唯一标识（比如类名resend-confirm-btn），然后用事件委托：

// 只需要绑定一次，放在页面初始化的代码里
$(document).on('click', '#resendInvitePopup .resend-confirm-btn', function(e) {
    e.preventDefault();
    // 执行你的重发请求逻辑
    sendResendInviteRequest();
});

这样不管模态框打开多少次，都只会有这一个事件监听，不会重复叠加。

2. 绑定前先解绑旧事件 #

如果你还是习惯直接给按钮绑定事件，那每次绑定前先清除之前的事件监听，确保每次打开模态框只有一个有效事件：

// 假设你用的是Magnific Popup（从mfp-with-anim类判断大概率是）
$('#resendInvitePopup').magnificPopup({
    // 其他模态框配置项
    callbacks: {
        open: function() {
            // 先解绑所有click事件，再重新绑定
            $('.resend-confirm-btn').off('click').on('click', function(e) {
                e.preventDefault();
                sendResendInviteRequest();
            });
        }
    }
});

这里的off('click')会清除按钮上所有之前绑定的click事件，再重新绑定新的，就不会有重复触发的问题了。

3. 标记请求状态，防止重复提交 #

除了事件绑定的问题，还可以给请求加个状态锁，就算事件重复绑定了，也只会发送一次请求：

let isResending = false; // 标记是否正在发送请求

function sendResendInviteRequest() {
    if (isResending) return; // 如果正在请求，直接返回，不重复发送
    isResending = true;

    // 发送AJAX请求
    $.ajax({
        url: '/your-resend-invite-api', // 你的接口地址
        method: 'POST',
        data: {
            // 传递需要的参数，比如邀请ID
            inviteId: $('#inviteId').val()
        },
        success: function(response) {
            // 请求成功后的逻辑，比如提示成功、关闭模态框
            alert('邀请已重发');
            $.magnificPopup.close();
        },
        error: function(xhr) {
            // 请求失败的逻辑，比如提示错误
            alert('重发失败，请稍后重试');
        },
        complete: function() {
            // 请求完成（不管成功失败），重置状态锁
            isResending = false;
        }
    });
}

额外检查点 #

• 看看你的代码里是不是每次模态框弹出时都执行了绑定事件的代码，比如在show()或者模态框的open回调里重复调用绑定逻辑。
• 确认有没有其他全局脚本也给这个Confirm按钮绑定了点击事件，导致叠加。

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