如何处理页面内多个动态生成的带表单modal，提交当前触发的对应表单

你提供的示例代码中第二个modal的id属性重复写为了modalForm-1，动态生成时需要保证所有modal的id与对应触发链接的href锚点一一对应，且页面内id全局唯一，否则会出现弹窗触发异常。

解决方案 #

你不需要为每个表单单独绑定提交事件，利用事件委托即可自动识别当前触发提交的表单：

方案1：原生JavaScript实现（无框架依赖）

document.addEventListener('submit', function(e) {
    // 筛选出modal内的表单提交事件
    const targetForm = e.target.closest('.modal-block form');
    if (!targetForm) return;

    // 如需做表单前置校验可在此处编写逻辑，校验不通过则加 e.preventDefault() 阻止提交
    // 以下为异步提交示例，不需要异步可删除直接走原生表单默认提交逻辑
    e.preventDefault();
    const formData = new FormData(targetForm);
    fetch(targetForm.action, {
        method: targetForm.method,
        body: formData
    }).then(res => res.json())
    .then(data => {
        // 处理提交返回结果
    });
});

方案2：jQuery实现

// 事件委托绑定所有modal内表单的提交事件
$(document).on('submit', '.modal-block form', function(e) {
    // $(this) 就是当前被提交的表单对象
    // 前置校验逻辑可在此处编写
    // 异步提交示例：
    e.preventDefault();
    $.post($(this).attr('action'), $(this).serialize(), function(res) {
        // 处理提交返回结果
    });
});

原理解释 #

每个form内的submit按钮默认只会触发所属父form的提交事件，只要表单结构没有嵌套错误、id不重复，配合事件委托就可以精准定位到当前被操作的表单，不需要额外做匹配判断。

注意事项 #

如果你使用的是Magnific Popup弹窗组件，注意不要开启dom复制相关配置，避免生成重复的表单节点导致提交异常。

内容的提问来源于stack exchange，提问作者Daniel W.