JavaScript中click事件多次绑定导致重复执行问题求助

你遇到的重复执行问题，核心原因是每次点击搜索按钮时，都会给btn_modal_footer新增一个click事件监听，而且之前绑定的监听没有被移除。多次操作后，按钮上叠加了多个相同的事件回调，所以每次点击都会触发所有历史绑定的函数。

另外你之前用removeEventListener无效，是因为search_elems是search函数内部的嵌套函数——每次调用search都会创建一个全新的search_elems函数实例，和之前绑定的函数引用不一样，所以removeEventListener找不到要移除的目标。

下面给你几种可行的修复方案，按需选择：

方案1：把回调函数提到外部，绑定前先移除旧监听 #

把search_elems改成全局/外部命名函数，这样每次绑定的都是同一个函数引用，就能用removeEventListener有效清理旧监听：

// 把search_elems提到search函数外部，确保每次都是同一个引用
function search_elems(event) {
    event.preventDefault();
    let code = input_code.value;
    if (code != null && code.trim() !== "") {
        $.ajax({ 
            url: base_url.value + 'index.php/ajax_get_elems',
            method: 'post',
            dataType: "json",
            data: { "code": code },
            success: function (response) {
                // 你的success逻辑
            }
        });
    } else {
        handler_errores_code(2);
    }
}

function search(event) {
    event.stopPropagation();
    buildModal(1);
    $('#modal_gid').modal('show');

    // 绑定新监听前，先移除旧的
    btn_modal_footer.removeEventListener("click", search_elems);
    btn_modal_footer.addEventListener("click", search_elems);
}

方案2：用jQuery的one()绑定一次性事件 #

既然你已经在用jQuery的模态框，可以直接用one()方法，确保按钮的点击事件只会触发一次，自动避免重复绑定：

function search(event) {
    event.stopPropagation();
    buildModal(1);
    const $modal = $('#modal_gid');
    $modal.modal('show');

    // 用one()替代addEventListener，只触发一次回调
    $modal.find(btn_modal_footer).one("click", function(event) {
        event.preventDefault();
        let code = input_code.value;
        if (code != null && code.trim() !== "") {
            $.ajax({ 
                url: base_url.value + 'index.php/ajax_get_elems',
                method: 'post',
                dataType: "json",
                data: { "code": code },
                success: function (response) {
                    // 你的success逻辑
                }
            });
        } else {
            handler_errores_code(2);
        }
    });
}

方案3：模态框关闭时清理事件监听 #

监听模态框的hidden.bs.modal事件（Bootstrap模态框的关闭事件），在模态框关闭时移除对应的事件监听，确保下次打开时重新绑定：

function search(event) {
    event.stopPropagation();
    buildModal(1);
    const $modal = $('#modal_gid');
    
    // 定义内部回调函数
    function search_elems(event) {
        event.preventDefault();
        let code = input_code.value;
        if (code != null && code.trim() !== "") {
            $.ajax({ 
                url: base_url.value + 'index.php/ajax_get_elems',
                method: 'post',
                dataType: "json",
                data: { "code": code },
                success: function (response) {
                    // 你的success逻辑
                    $modal.modal('hide'); // 成功后关闭模态框
                }
            });
        } else {
            handler_errores_code(2);
        }
    }

    // 绑定事件
    btn_modal_footer.addEventListener("click", search_elems);
    $modal.modal('show');

    // 模态框关闭时，移除事件监听
    $modal.one('hidden.bs.modal', function() {
        btn_modal_footer.removeEventListener("click", search_elems);
    });
}

你的添加、批量添加、删除按钮应该是同样的问题——每次打开对应模态框时都重复绑定了事件。可以把上面的方案套用到其他功能上：要么统一用外部命名函数+先移除再绑定，要么用one()一次性事件，要么在模态框关闭时清理监听。

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