PHP页面多表单场景下submit事件多次触发问题求助

问题根源 #

1. 表单收集逻辑错误：parentForm.push($('.js-address-form form')) 是把包含所有表单的jQuery集合整个推入数组，而非单个表单元素，导致后续循环处理的是整个集合而非独立表单。
2. 事件委托参数错误：$(document).on('submit', val, ...) 中第二个参数传入的是jQuery对象，而事件委托要求的是选择器字符串，这会导致每次循环都给document绑定一个监听所有表单的submit事件，最终单个表单提交时触发所有绑定的事件。

修正方案 #

方案一：直接绑定表单事件（适用于静态表单）

先修正表单收集逻辑，再给每个表单单独绑定submit事件：

// 正确收集单个表单元素到数组
const parentForm = $('.js-address-form form').toArray();

jQuery.each(parentForm, function(i, formElement) {
  $(formElement).on('submit', function(event) {
    // 阻止默认表单提交行为，避免页面刷新
    event.preventDefault();
    
    $.ajax({
      type: method,
      url: lpd_front_controller,
      // 建议移除async: false，同步请求会阻塞页面
      data: {
        ajax: true,
        action: 'Add',
        id_customer: lpd_id_customer,
        customer_token: lpd_customer_token,
        id_guest: lpd_id_guest,
        guest_token: lpd_guest_token,
        consent_section: consent_section[i]
      },
      error: function(err) {
        console.log(err);
      }
    });
  });
});

方案二：事件委托（适用于动态生成的表单）

无需循环，直接用统一选择器绑定到document，通过表单索引匹配对应数据：

$(document).on('submit', '.js-address-form form', function(event) {
  event.preventDefault();
  
  // 获取当前表单在集合中的索引，匹配consent_section数据
  const formIndex = $('.js-address-form form').index(this);
  
  $.ajax({
    type: method,
    url: lpd_front_controller,
    data: {
      ajax: true,
      action: 'Add',
      id_customer: lpd_id_customer,
      customer_token: lpd_customer_token,
      id_guest: lpd_id_guest,
      guest_token: lpd_guest_token,
      consent_section: consent_section[formIndex]
    },
    error: function(err) {
      console.log(err);
    }
  });
});

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