模态框内HTML表单提交未触发jQuery submit函数与Ajax请求问题

根因分析 #

• 事件绑定目标是动态生成元素：你使用的MDB Editor组件会动态渲染编辑模态框的DOM结构，如果你在页面初始化阶段就直接给#editForm绑定submit事件，此时该form元素还没有被插入到DOM树中，事件绑定不会生效。
• 组件内置逻辑拦截了事件：MDB Editor开启modalEditor: true配置后，自带编辑提交的默认处理逻辑，会拦截form的原生submit事件优先执行组件内置的前端数据更新逻辑，不会触发你自定义的submit处理函数。
• 提交按钮属性导致DOM提前销毁：你在提交按钮上添加了data-dismiss="modal"属性，点击按钮会先触发模态框关闭、移除对应DOM元素，导致submit事件还没触发就失去了事件绑定的目标元素。

解决方案 #

1. 替换为事件委托绑定submit事件
   不要直接给动态生成的#editForm绑定事件，改为绑定到页面初始化时就存在的上层静态元素（比如document），这样无论form什么时候生成都能捕获到事件：

$(document).on('submit', '#editForm', function (event) {
    event.preventDefault(); 
    var post_url = $(this).attr("action"); 
    var request_method = $(this).attr("method");
    var form_data = $(this).serializeArray(); 
    
    console.log(form_data);

    $.ajax({
        url: post_url,
        contentType: "application/json",
        type: request_method,
        data: JSON.stringify(form_data),
        success: function() {
            $('#modalEdit').modal('hide'); // 请求成功后手动关闭模态框
        }
    });
});

2. 移除提交按钮的data-dismiss="modal"属性
   修改模态框内的提交按钮代码，避免点击按钮直接销毁模态框DOM：

<button id="button-save-edit" type="submit" name="submit"
  class="btn btn-outline-secondary btn-block editInside">
  Edit form
  <i class="fas fa-paper-plane-o ml-1"></i>
</button>

3. 备选方案：直接绑定提交按钮点击事件
   如果组件依然拦截submit事件，可以改为监听提交按钮的点击事件触发AJAX请求：

$(document).on('click', '#button-save-edit', function(e) {
    e.preventDefault();
    const $form = $('#editForm');
    var post_url = $form.attr("action");
    var request_method = $form.attr("method");
    var form_data = $form.serializeArray();
    
    console.log(form_data);

    $.ajax({
        url: post_url,
        contentType: "application/json",
        type: request_method,
        data: JSON.stringify(form_data),
        success: function() {
            $('#modalEdit').modal('hide');
        }
    });
});

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