如何在函数执行前添加模态框确认步骤，获用户批准后再执行？

原代码的核心问题 #

1. 函数立即执行：你传递delete_benefit(id)时，是直接执行了这个函数并把结果传进去，不是传递函数本身——所以弹窗还没确认，删除操作已经触发了。
2. 事件监听冲突：确认按钮的事件是全局一次性绑定的，后续复用模态框传其他回调时，旧的回调还会生效，导致点击确认触发多个操作。

典型实现流程 #

1. 模态框仅做基础结构，不提前绑定确认按钮的业务回调。
2. 调用模态框时，传入带上下文的回调函数引用（而非执行后的结果）。
3. 每次弹窗时，先清理确认按钮的旧事件监听，再绑定当前业务的回调，执行后关闭模态框。

修正后的代码示例 #

复用的模态框函数

function call_modal(title, text, confirmCallback) {
    // 设置模态框文本
    $('#modalTitle').html(title);
    $('#modalText').html(text);
    
    // 先移除确认按钮之前的所有事件监听，避免重复触发
    $('#confirm-button').off('click');
    
    // 绑定当前业务的确认回调
    $('#confirm-button').on('click', function() {
        // 执行传入的业务函数
        confirmCallback();
        // 关闭模态框
        $('#modal-wrapper').hide();
    });
    
    // 显示模态框
    $('#modal-wrapper').show();
}

删除按钮的点击事件

// 福利删除按钮绑定
$('.delete-benefit').on('click', function(e) {
    e.preventDefault();
    const benefitId = $(this).closest('.benefit-wrapper-id').attr('id');
    
    // 用箭头函数包裹删除操作，传递函数引用而非执行结果
    call_modal(
        '删除福利',
        '确定要删除这条福利吗？',
        () => delete_benefit(benefitId)
    );
});

// 实际的删除逻辑函数
function delete_benefit(id) {
    // 这里写你的删除逻辑，比如AJAX请求后端接口
    console.log('正在删除ID为', id, '的福利');
    // 示例：$.ajax({ url: '/api/benefits/' + id, method: 'DELETE' });
}

可选：取消按钮逻辑

// 取消按钮关闭模态框
$('#cancel-button').on('click', function() {
    $('#modal-wrapper').hide();
});

复用说明 #

不管是删除福利、删除用户还是其他需要确认的操作，只需要调用call_modal，传入对应的标题、提示文本和业务回调函数即可。比如删除用户的场景：

$('.delete-user').on('click', function(e) {
    e.preventDefault();
    const userId = $(this).closest('.user-wrapper').attr('data-id');
    
    call_modal(
        '删除用户',
        '确定要删除该用户吗？此操作不可恢复。',
        () => delete_user(userId)
    );
});

function delete_user(id) {
    // 用户删除逻辑
}

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