当 Bootstrap 模态框中的表单是动态插入 DOM（如通过 AJAX 加载或 JS 渲染）时，直接使用 $('#formCsv').on('submit', ...) 无法触发事件；必须改用事件委托方式绑定到 document 或静态父容器上。

当 bootstrap 模态框中的表单是动态插入 dom（如通过 ajax 加载或 js 渲染）时，直接使用 `$('#formcsv').on('submit', ...)` 无法触发事件；必须改用事件委托方式绑定到 `document` 或静态父容器上。

在使用 jQuery 处理模态框（Modal）中表单的交互时，一个常见却容易被忽视的问题是：事件监听器未生效。正如示例所示，控制台能输出 "Works"，但 alert("test") 完全不执行——这并非代码语法错误，而是典型的 DOM 节点生命周期与事件绑定时机不匹配 所致。

根本原因在于：该

并非页面初始加载时就存在于 DOM 中，而是后续通过 JavaScript 动态插入（例如调用 $('#myModal').modal('show') 前才渲染进模态框内容区，或通过 AJAX 请求填充）。而 $(document).ready() 中执行的 $("#formCsv").on('submit', ...) 是一次性查找并绑定，此时若 #formCsv 尚未存在，绑定即失败，且不会自动重试。

✅ 正确解法是使用 事件委托（Event Delegation）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(function() {
    // ✅ 使用事件委托：监听 document 上冒泡至 #formCsv 的 submit 事件
    $(document).on('submit', '#formCsv', function(e) {
        e.preventDefault();
        alert("test"); // 现在可正常触发

        const form_data = new FormData(this); // 更简洁：this 指向原生 form 元素

        $.ajax({
            type: 'POST',
            url: 'src/positionen/getCsvData.php',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(response) {
                try {
                    const json = JSON.parse(response);
                    addToTable(json);
                } catch (err) {
                    console.error('Invalid JSON response:', response);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', status, error);
            }
        });
    });
});

? 关键要点：

• $(document).on('event', 'selector', handler) 中的 selector 是动态匹配目标元素，只要事件最终冒泡到 document 且符合选择器条件，就会触发回调；
• 推荐将委托容器从 document 升级为最近的静态父容器（如 #modalContainer），以提升性能：
  $('#modalContainer').on('submit', '#formCsv', ...)；
• 避免重复绑定：若模态框可能多次打开/关闭并反复注入相同表单，请确保不重复执行绑定逻辑（例如在模态框 shown.bs.modal 事件中绑定前先 off()）；
• 表单提交后建议禁用按钮防止重复提交，并在 AJAX 完成后恢复（配合 loading 元素状态管理）。

? 补充提示：现代开发中，若项目已引入 jQuery 3.0+，也可考虑使用 $.fn.on() 的委托语法替代全局 document 绑定，兼顾兼容性与可维护性。始终记住——动态内容，需委托；静态内容，可直绑。