Flask应用中jQuery脚本未触发，AJAX表单无刷新提交失效问题

导致jQuery事件未触发的常见原因 #

• jQuery引入顺序错误/未引入
  必须先引入jQuery官方库，再引入你自己的script.js文件。如果顺序颠倒，$全局变量未定义，脚本执行直接失败，不会完成事件绑定。可打开Chrome控制台看是否有$ is not defined类报错验证。
• 脚本加载时机早于DOM渲染
  如果你把script.js放在<head>标签里，或者放在表单代码的前面，脚本执行时#new_app_b按钮还没有被渲染到页面上，事件绑定会直接失效。
  修复方案二选一：
  1. 将script.js的引入标签移到layout.html的</body>闭合标签之前，保证DOM渲染完成后再执行脚本
  2. 将现有的JS代码包裹在DOM就绪回调中：

  $(document).ready(function() {
    $("#new_app_b").click(function(event) { 
      // 你原有代码保持不变
    });
  });
  

• 元素ID异常
  检查页面渲染后的实际源码，确认提交按钮的id属性确实是new_app_b，且页面中没有其他元素和这个ID重复，ID重复会导致jQuery选择器匹配失效。
• 事件绑定方式不适用于动态内容
  如果你的表单是页面加载完成后动态插入的（比如通过其他JS渲染），直接绑定click事件会失效，可以改用事件委托写法：

  $(document).on("click", "#new_app_b", function(event) {
    event.preventDefault();
    // 原有逻辑不变
  });
  

其他后续可预见的问题 #

就算事件触发成功，你现有代码还有几处问题会导致请求失败：

1. AJAX参数选择器错误：表单中日期输入框的id是data_int、时间输入框的id是ora_app，但你代码中写的是$('#data_app').val()、$('#time_app').val()，匹配不到元素，会传空值
2. 后端参数名不匹配：你AJAX传的用户ID的key是id，但后端代码取的是request.form['id_pratica']，会直接抛出KeyError异常。

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