HTML表单submit提交事件无法触发绑定JavaScript代码求助

经排查，你的代码存在4个直接导致提交逻辑不执行的核心问题，按优先级修复即可：

• DOM未加载完成就绑定事件
  你的事件绑定代码$("#download-form").on("submit",...)如果在表单DOM渲染前执行（比如把script标签放在页面头部、没有加DOM加载完成监听），jQuery会找不到id为download-form的表单元素，事件根本不会被绑定到元素上，提交时自然不会触发逻辑。
  修复方案二选一即可：
  1. 把自定义JS的script标签移到页面最底部，</body>闭合标签之前，保证执行JS时所有表单元素已经渲染完成
  2. 把所有事件绑定逻辑包裹在jQuery的DOM加载完成回调中：

  $(function() {
    // 原有的submit事件绑定整段代码放在这里
  })
  

• JS存在语法错误中断执行
  你的代码中//console.log(jsondstring);这行末尾多写了两个反引号`，JS引擎解析到这个非法字符时会直接抛出语法错误，后续所有代码都不会执行。
  修复方式：直接删除这行末尾多余的两个反引号即可。
• 依赖库缺失或加载顺序错误
  你的代码同时依赖jQuery和reCAPTCHA v3两个库，如果页面没有提前加载这两个库，或者把自定义JS放在依赖库之前加载，会直接抛出$ is not defined或grecaptcha is not defined的报错，导致逻辑中断。
  修复方式：按顺序在页面中引入依赖：先加载jQuery库，再加载reCAPTCHA脚本，最后加载你写的自定义JS代码。
• 外层CF7插件拦截提交事件
  你的表单外层套了带wpcf7类的容器，是WordPress的Contact Form 7插件的默认容器，该插件自带的JS会默认拦截容器内的表单提交事件，抢在你的自定义逻辑之前处理提交，导致你的绑定代码不触发。
  修复方式二选一：
  1. 把表单移出带wpcf7类的外层容器
  2. 改用CF7插件提供的官方提交钩子绑定自定义逻辑，避免事件冲突

附带修复几个提交后逻辑的小问题 #

这些问题不会阻止提交事件触发，但会导致提交后的反馈异常：

• 错误提示容器<div id="dialog" visibility="hidden">的隐藏属性写法错误，visibility是CSS属性，需要写在style里才会生效，修改为：

  <div id="dialog" style="visibility: hidden;"></div>
  

• 错误回调里的$("dialog")选择器写法错误，这个选择器会匹配<dialog>标签元素，不会匹配id为dialog的div，直接删除这行即可，你后面写的$("#dialog")才是正确的选择器写法。
• 提交按钮id设为submit会覆盖表单原生的submit方法，可能在部分浏览器下导致事件触发异常，建议把按钮id改成submit-btn之类的自定义名称，不要用原生DOM属性名作为元素id。

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