jQuery无法触发Bootstrap模态框内表单提交事件问题排查

核心产生原因 #

表单放在模态框外可正常提交、放在模态框内submit事件不触发，控制台无报错，基本由以下三类问题导致：

• DOM结构非法：嵌套表单被浏览器自动修正
  HTML规范明确禁止<form>标签嵌套，如果你编写代码时把Bootstrap模态框的整块HTML放在了页面已有的另一个外层<form>内部，Bootstrap初始化模态框时会自动将.modal节点移动到<body>末尾，触发浏览器的DOM自动修正逻辑——直接删除内层非法嵌套的<form id="formCsv">标签，只保留表单内部的input、button等子元素。此时提交按钮没有对应的form元素包裹，submit事件自然不会触发。
• 事件绑定时机错误，未覆盖动态渲染的元素
  如果你的模态框内容是点击触发按钮后才通过JS动态渲染插入的，在$(document).ready执行时，#formCsv元素还不存在于DOM树中，此时使用$("#formCsv").on('submit', 回调)的直接绑定方式，只能绑定到执行瞬间已经存在的元素，后续动态插入的表单不会被绑定事件。
• 遮罩层遮挡点击
  模态框关闭异常时会残留透明的.modal-backdrop遮罩层，z-index高于表单按钮，点击时实际点到了遮罩层，没有触发按钮的提交行为。

对应修复方案 #

1. 修复DOM结构问题
   打开浏览器F12开发者工具，切换到Elements面板，定位到模态框内的Upload按钮，向上遍历父元素：
   • 如果找不到<form id="formCsv">标签，确认存在外层嵌套表单的，把模态框的整块HTML代码移到所有外层<form>标签外部，建议直接放在</body>闭合标签前，避免Bootstrap移动模态框节点时出现结构错乱。
2. 替换事件绑定方式为委托绑定
   把直接绑定的事件代码改成委托绑定，兼容动态插入的表单元素，修改后的JS代码如下：

   console.log("Works");
   
   $(document).ready( function() {
       // 委托绑定：监听document上的submit事件，匹配#formCsv时触发
       $(document).on('submit', '#formCsv', function(e)
       {
           alert("test");
           e.preventDefault();
           var form_data = new FormData($(this)[0]); 
   
           $.ajax({
               type: 'POST',
               url: 'src/positionen/getCsvData.php',
               data: form_data,
               contentType: false,
               cache: false,
               processData:false,
               success: function(response)
               {
                   console.log(response);
                   var json = JSON.parse(response);                
                   addToTable(json);
               },
           });
       });
   });
   

3. 排查遮罩遮挡问题
   如果点击按钮时无任何响应，打开开发者工具用元素选择器拾取点击位置，若选中的是.modal-backdrop节点，先执行$('.modal-backdrop').remove()清理残留遮罩，再检查模态框的z-index配置，确保按钮、表单层级高于遮罩层即可。

快速验证方法 #

在浏览器控制台执行$('#formCsv').length：

• 返回0：说明DOM中不存在该表单，优先排查嵌套表单导致的标签被浏览器删除、或表单还未动态渲染的问题
• 返回1：手动在控制台执行$('#csvBtn').click()，如果能触发alert，说明存在遮罩层遮挡了按钮点击

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