Flask中点击按钮触发JS弹窗报错：Uncaught ReferenceError: $ is not defined

看起来你遇到了jQuery加载失败的典型问题——哪怕换成jQuery关键字也没用，说明jQuery根本没被正确加载到页面里。结合Flask的静态文件规则，我帮你梳理几个排查和解决方向：

1. 检查静态文件的引入路径是否符合Flask规则 #

Flask默认把静态文件放在static目录下，直接写相对路径（比如js/jquery.min.js）很容易因为路由解析问题出错，正确的做法是用Flask的url_for生成路径：

• 本地jQuery文件的正确引入方式：

<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<!-- 必须在jQuery之后引入你的自定义JS -->
<script src="{{ url_for('static', filename='js/your-custom-script.js') }}"></script>

2. 确认加载顺序：jQuery必须在自定义JS之前加载 #

这是最常见的错误！如果你的自定义JS先加载完成，而jQuery还没加载到位，必然会触发$ is not defined。一定要把jQuery的<script>标签放在所有依赖它的脚本前面。

3. 验证jQuery是否真的加载成功 #

打开浏览器开发者工具做两个检查：

• 切换到Network标签页，刷新页面后搜索jquery，查看请求状态是否为200（成功）。如果是404，说明文件路径错误，检查static目录结构是否符合预期（比如是不是把jQuery放在了static/js/下）。
• 切换到Console标签页，直接输入$或jQuery并回车，如果返回类似function(a,b){...}的函数，说明加载成功；如果还是报错，那就是确实没加载进来。

4. 排查CDN引入的网络问题（如果用CDN的话） #

如果你是通过CDN引入jQuery，先确认链接有效且网络能访问：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

可以把CDN链接复制到浏览器地址栏，看能否正常下载文件。

5. 调整自定义JS的执行时机 #

如果jQuery确实加载成功，但还是报错，可能是代码在页面元素未就绪时就执行了。把代码放在$(document).ready()里确保时机正确：

// 用$的写法
$(document).ready(function() {
  $('#your-button-id').click(function() {
    alert('提示内容');
  });
});

// 或者用jQuery的写法
jQuery(document).ready(function() {
  jQuery('#your-button-id').click(function() {
    alert('提示内容');
  });
});

额外提示：Flask静态文件的常见坑 #

• 确保项目结构符合标准：

your-flask-project/
  app.py
  static/
    js/
      jquery.min.js
      your-custom-script.js
  templates/
    index.html

• 调试模式下可能有缓存问题，强制刷新页面（Ctrl+F5）或清除浏览器缓存试试。

先从路径和加载顺序这两点排查，大概率能解决你的问题。

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