Django模板中Javascript不生效、修改后代码未更新问题求助

1. 静态文件被浏览器缓存 #

修改JS后控制台仍打印旧内容是最典型的静态资源缓存现象，浏览器会默认缓存JS/CSS这类静态文件减少重复请求，修改后的代码没有被浏览器重新加载。
解决方法：

• 先强制刷新页面：Windows/Linux按Ctrl + Shift + R，Mac按Cmd + Shift + R，直接跳过缓存加载所有资源
• 开发阶段可以给Django配置静态文件自动加版本戳避免缓存：在settings.py中添加STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'，打包静态文件时会自动给文件加哈希后缀，修改后自动更换地址不会被缓存
• 也可以临时给引入的JS地址加查询后缀测试，比如<script src="{% static 'js/main.js' %}?v=1"></script>，修改代码就改v后面的数字，强制浏览器加载新文件

2. JS加载顺序错误 #

当前脚本引入顺序完全错误，所有依赖jQuery的功能都无法生效：

• 你先引入了自定义的js/main.js，再引入jQuery库和jQuery相关插件（如下拉菜单依赖的jquery.dropotron），此时main.js里用到$或者jQuery方法的代码会因为找不到jQuery直接报错，后续功能自然失效
• 下拉菜单依赖的jquery.dropotron必须在jQuery加载完成后再引入，自定义业务代码也要放在所有依赖库的后面
  修正后的scripts.html顺序：

{% load static %}
<!-- 先加载第三方依赖库 -->
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.dropotron.min.js' %}"></script>
<script src="{% static 'assets/js/browser.min.js' %}"></script>
<script src="{% static 'assets/js/breakpoints.min.js' %}"></script>
<script src="{% static 'assets/js/util.js' %}"></script>
<script src="{% static 'assets/js/main.js' %}"></script>
<!-- 最后加载自己编写的自定义JS -->
<script src="{% static 'js/main.js' %}"></script>

3. 重复引入main.js导致冲突 #

你同时引入了两个路径的main.js：js/main.js和assets/js/main.js，如果两个文件里有同名方法或者重复逻辑会互相覆盖：

• 确认你修改的是正在运行的项目对应的静态文件，不要误改其他目录下的备份文件
• 打开浏览器开发者工具的「网络」标签，筛选JS资源，查看实际加载的JS文件路径和内容，确认是不是你修改后的版本：如果文件内容还是旧的说明缓存未清理，如果文件不存在返回404，说明静态文件路径配置错误，检查settings.py里的STATIC_URL、STATICFILES_DIRS配置是否正确

4. 排查JS报错 #

打开浏览器开发者工具的「控制台」标签，先查看有没有红色报错信息：

• 如果报$ is not defined就是jQuery加载顺序错误的问题
• 如果报404错误就是静态文件路径不对，确认Django静态文件配置正确，开发阶段要在urls.py里加上静态文件的访问规则：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他路由
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

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