如何仅加载一次与模态框关联的脚本？

针对你遇到的模态框每次打开都会重复绑定事件、导致动作触发多次的问题，给你三个实用的解决思路：

1. 标记已初始化状态 #

在表单完成初始化后添加一个状态标记，下次打开模态框时先检查该标记，已初始化则不再执行脚本：

修改初始化函数，加入初始化判断和标记：

function initPrestationTypeModalForm() {
    const form = document.getElementById("prestaTypeForm");
    // 已初始化则直接返回，避免重复执行
    if (form.dataset.initialized === "true") return;
    
    // 你的原有初始化逻辑，比如绑定提交事件
    $('#prestaTypeForm .submit-btn').on('click', function(e) {
        e.preventDefault();
        // 处理表单提交逻辑
    });
    
    // 标记表单为已初始化
    form.dataset.initialized = "true";
}

模态框的show事件逻辑保持不变即可，因为init函数会自行过滤重复执行：

$(document).ready(function () {
    $('#form-modal').on('show.bs.modal', function () {
        if (document.getElementById("prestaTypeForm")) {
            initPrestationTypeModalForm()
        }
    })
})

2. 使用事件委托绑定事件 #

把原本绑定在表单元素上的事件，委托给模态框（或更上层的静态父元素），这样事件只需要绑定一次，不会因表单重复加载而重复绑定：

调整初始化逻辑，改用事件委托：

function initPrestationTypeModalForm() {
    // 事件委托给模态框，监听表单内按钮的点击，只需绑定一次
    $('#form-modal').on('click', '#prestaTypeForm .submit-btn', function(e) {
        e.preventDefault();
        // 处理提交逻辑
    });
    
    // 其他非事件绑定的初始化逻辑（如表单验证配置）按需处理即可
}

// 事件委托只需执行一次，直接放在document.ready中
$(document).ready(function () {
    initPrestationTypeModalForm();
    
    $('#form-modal').on('show.bs.modal', function () {
        // 若有每次打开模态框都需要执行的非事件逻辑，放在这里
    })
})

这种方式不仅避免了重复绑定，还能兼容动态插入的表单元素。

3. 初始化前解绑原有事件 #

如果必须每次打开模态框都执行初始化逻辑，可以在绑定新事件前先解绑原有事件，确保同一事件只会触发一次：

function initPrestationTypeModalForm() {
    // 先解绑原有点击事件，再重新绑定
    $('#prestaTypeForm .submit-btn').off('click').on('click', function(e) {
        e.preventDefault();
        // 处理提交逻辑
    });
    
    // 其他初始化逻辑
}

这种方式简单直接，每次初始化都会清除之前的事件绑定，从根源避免重复触发。

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