如何移除点击事件处理，解决模态框重复请求与变量未定义问题

核心问题分析 #

1. 重复请求：原代码每次点击链接都给确认按钮绑定新事件，导致多次绑定后确认操作触发多次请求。
2. URL 未定义：将确认按钮事件移到外部后，原 URL 变量的作用域局限于链接点击事件内，外部无法访问。
3. 模态框打开时禁用其他链接：需要利用模态框的显示/隐藏事件，动态控制其他链接的可点击状态。

完整实现代码 #

1. 确认模态框的 HTML 结构（Bootstrap 5 示例）

<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        您确定要执行此操作吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="confirmBtn">确认</button>
      </div>
    </div>
  </div>
</div>

2. JavaScript 逻辑（jQuery + Bootstrap 5）

$(function() {
    // 存储当前待确认的请求地址
    let currentConfirmUrl = '';
    // 初始化模态框实例
    const confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
    // 目标链接选择器
    const confirmLinkSelector = '[data-bs-toggle="modal"][requires-confirmation]';

    // 绑定链接点击事件：阻止默认跳转，记录URL并打开模态框
    $(document).on('click', confirmLinkSelector, function(e) {
        e.preventDefault();
        currentConfirmUrl = $(this).attr('href');
        confirmModal.show();
    });

    // 模态框显示时：禁用所有需要确认的链接
    $('#confirmModal').on('shown.bs.modal', function() {
        $(confirmLinkSelector)
            .addClass('disabled-link')
            .attr('disabled', true);
    });

    // 模态框隐藏时：恢复链接状态，清空缓存的URL
    $('#confirmModal').on('hidden.bs.modal', function() {
        $(confirmLinkSelector)
            .removeClass('disabled-link')
            .removeAttr('disabled');
        currentConfirmUrl = '';
    });

    // 确认按钮点击事件（仅绑定一次）
    $('#confirmBtn').on('click', function() {
        if (!currentConfirmUrl) return;

        // 根据需求选择请求方式：
        // 方式1：GET请求直接跳转
        window.location.href = currentConfirmUrl;

        // 方式2：POST请求（适合删除/修改等操作，需配合Action的[HttpPost]特性）
        // const form = $('<form>', { method: 'POST', action: currentConfirmUrl });
        // form.append('@Html.AntiForgeryToken()'); // 添加防伪造令牌
        // form.appendTo('body').submit();

        confirmModal.hide();
    });
});

3. 禁用链接的样式补充

[data-bs-toggle="modal"][requires-confirmation].disabled-link {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: none;
}

关键优化点说明 #

• 避免重复请求：确认按钮事件仅绑定一次，通过全局作用域的currentConfirmUrl存储当前请求地址，每次模态框打开时更新该变量，确保确认操作只触发一次。
• 解决URL未定义：将currentConfirmUrl声明在jQuery初始化函数的作用域内，让确认按钮事件可以访问到。
• 禁用其他链接：利用Bootstrap模态框的shown.bs.modal和hidden.bs.modal事件，动态给目标链接添加/移除禁用样式与属性，阻止模态框打开时的误操作。

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