如何通用化jQuery submit函数 批量绑定id带指定前缀的表单提交事件

解决方案 #

1. 最简实现：一次性绑定所有符合前缀规则的表单 #

利用jQuery的[attribute^="value"]属性前缀选择器，可以直接选中所有id以form-ws-开头的表单，不需要逐个声明绑定，也不需要手动传递表单参数：

$('form[id^="form-ws-"]').submit(function(event) {
    event.preventDefault();
    // 这里的this直接指向当前触发提交事件的表单DOM元素
    const formData = new FormData(this);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json);
});

2. 保留你封装的custom_submit函数的实现方案 #

调整函数逻辑适配jQuery事件回调规则即可，jQuery事件处理函数默认第一个参数就是event对象，函数内this指向触发事件的元素：

function custom_submit(event) {
    event.preventDefault();
    const formData = new FormData(this);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json);
}

// 一次性绑定所有匹配前缀的表单
$('form[id^="form-ws-"]').submit(custom_submit);

补充：适配动态新增表单的方案 #

如果后续会动态插入符合form-ws-*前缀的表单，可以用事件委托的方式绑定，不需要新增表单后重复执行绑定逻辑：

// 事件委托到document，所有符合规则的表单提交都会触发处理逻辑
$(document).on('submit', 'form[id^="form-ws-"]', function(event) {
    event.preventDefault();
    const formData = new FormData(this);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json);
});

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