首个Ajax监听器后续绑定不生效 如何同时监听两个表单提交事件

问题根因 #

你使用的$(选择器).submit()是直接事件绑定，仅会对绑定执行时已经存在于DOM中的元素生效：

• 若#form-2是提交#form-1后才动态插入到页面的，初始化绑定事件时DOM中不存在该元素，事件绑定自然失效
• 若脚本加载位置早于DOM渲染，哪怕初始页面就存在#form-2，绑定时还没渲染出该元素，同样不会生效

解决方案 #

使用事件委托，把#form-2的提交事件绑定在页面初始化时就已经存在的父级元素上（比如#user-info或者document），利用事件冒泡机制匹配动态生成的元素，修改后的代码如下：

// #form-1 初始就存在，可保留原有直接绑定逻辑
$('#form-1').submit(function(e) {
    e.preventDefault();
    const user = $(this).serialize();
    $.post('/user', user, function(data) {
        // 清空原有内容避免重复插入
        $('#user-info').empty().append(
           `<p>Username: ${data.username}</p>
            <form action="/user?_method=PATCH" method="POST" id="form-2">
            <input type="email" id="user-email" name="user-email">
            <button>Submit</button>
            </form>`
        )
    });
});

// #form-2 使用事件委托绑定到document（也可替换为最近的静态父元素#user-info）
$(document).on('submit', '#form-2', function(e) {
    e.preventDefault();
    const user = $(this).serialize();
    $.ajax({
        url: '/user',
        data: user,
        type: 'PATCH',
        success: function(data) {
            $('#user-info').empty().append(
           `<p>Username: ${data.username}</p>
            <p>Email: ${data.email}</p>`
        )
        }
    });
});

补充说明 #

• 原有代码中使用append()会持续往容器中追加内容，容易出现重复的用户名、表单元素，建议插入新内容前先调用empty()清空旧内容
• 事件委托的匹配逻辑是父元素收到冒泡的事件后，判断触发源是否匹配目标选择器，所以不管元素是初始渲染还是后续动态插入，都能正常触发回调
• 如有其他异常可打开浏览器开发者工具的控制台，排查是否有JS语法错误、接口请求报错等问题

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