使用getElementsByClassName绑定submit事件后preventDefault失效如何解决

问题原因 #

• 事件绑定执行时，后端异步返回的form元素还未插入DOM，你通过getElementsByClassName获取到的是空集合，没有任何元素被绑定submit事件，表单提交直接走默认刷新行为，preventDefault自然不会生效
• 代码存在拼写错误：异步请求返回的变量命名为resData，但判断时写的是ressData，多了一个s，会触发未定义报错
• 原始循环的迭代变量n没有用let声明，会成为全局变量，也可能在多场景下造成逻辑异常

修复方案 #

推荐使用事件委托，将submit事件绑定到页面初始就存在的上层容器（可直接用document，也可以替换为你存放这些异步片段的固定父容器，性能更好），不需要等待异步元素加载完成即可生效，也不需要循环绑定每个form。
修正后的JS代码如下：

// 直接绑定到document，也可以替换为你存放这些异步片段的已存在的父元素
document.addEventListener("submit", (event) => {
  // 只匹配class为linkForm的表单提交事件
  if (event.target.classList.contains('linkForm')) {
    event.preventDefault()
    const eventName = event.target.check.value;
    const link = event.target.linkInput.value;
    // 注意提前确认uid和email是已定义的全局变量，否则会触发未定义报错
    console.log(eventName, link, uid, email)
    const uploadLink = async() => {
      try {
        const response = await fetch(
          '/uploadLinks', {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              event: eventName,
              link,
              email,
              uid
            })
          }
        );
        const resData = await response.json();
        // 修复拼写错误
        if (resData.token === 'done') {
          window.alert('That was a lot of work! well Done! link is uploaded')
        }
      } catch (err) {
        // 新增错误捕获，方便排查请求异常
        console.error('链接上传失败：', err)
      }
    }
    uploadLink()
  }
})

如果你不想用事件委托，也可以选择在后端异步拉取界面片段、插入DOM完成之后，再执行你原来的循环绑定逻辑，也能解决绑定失效的问题。

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