Bootstrap 3模态框内按钮点击事件多次触发的解决办法咨询

问题描述 #

在Bootstrap 3（v3.4.1）和jQuery v3.3.1环境下，由另一个模态框打开的嵌套模态框内，btnSendReport按钮每次点击会触发4次点击事件。已确认DOM中仅存在一个该ID的按钮，无页面回发操作，目前仅通过HTML按钮直接调用脚本的方式有效，需其他可行解决方案。

相关代码 #

HTML代码 #

<div class="modal-footer">
    <span id="spanSendReport">
        <button type="button" id="btnSendReport" class="btn btn-success" data-dismiss="modal">Send Report</button>
    </span>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

jQuery点击事件代码 #

$("#btnSendReport").click(function (e) {
    var parElem = $(this).parent().parent().parent();
    var listID = parElem.find("#hidLID").val();
    var problemTypes = $.map(parElem.find('option:selected'), function (e) { return e.value; }).join(',');
    var problemTypeOther = parElem.find("#txtProblemTypeOther").val();

    var obj = {};
    obj.lid = listID;
    obj.ProblemTypes = problemTypes;
    obj.ProblemTypeOther = problemTypeOther;

    try {
        $.ajax({
            type: "POST",
            url: "../../api/reportdiscrepancy/",
            data: obj,
            dataType: "json",
            success: function (data) {
                var result = data;
            },
            error: function (err) {
                console.log(err);
            }
        });
    } catch (err) {
        console.log(err);
    }
});

解决方案 #

1. 先解绑再绑定事件 #

每次绑定前移除已存在的点击事件，避免重复绑定：

$("#btnSendReport").off('click').click(function (e) {
    // 原有业务代码
});

2. 使用事件委托绑定到静态父元素 #

将事件绑定到页面加载时就存在的静态元素（如document或外层容器），利用事件委托机制，避免动态生成的模态框重复绑定事件：

$(document).on('click', '#btnSendReport', function (e) {
    // 原有业务代码
});

3. 阻止事件冒泡 #

嵌套模态框可能导致事件向上冒泡，触发上层元素的绑定事件，添加stopPropagation()阻止冒泡：

$("#btnSendReport").click(function (e) {
    e.stopPropagation(); // 阻止事件冒泡
    // 原有业务代码
});

4. 优化模态框初始化逻辑 #

避免每次打开模态框都动态生成DOM元素，复用同一个模态框实例，仅控制其显示/隐藏状态，从根源上减少重复绑定的可能。

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