Django引入jQuery CDN后周度日程插件报jQuery未定义如何解决

架构老林

2026-9-28

问题根源

你遇到的错误核心是脚本加载顺序错误，和是否使用jQuery CDN无关。

1. defer属性使用错误

你给jQuery的CDN引入标签添加了defer属性，该属性会让浏览器推迟该脚本的加载与执行，直到整个HTML文档解析完成。但你后续引入的jquery.schedule.js没有添加defer属性，会在HTML解析过程中立即执行，执行时jQuery还未完成初始化，因此抛出jQuery is not defined的错误。

2. 初始化脚本存在两处错误

选择器写错：$("schedule")是选中<schedule>自定义标签，如果你页面里的日程容器是用class或id定义的，需要对应改为类选择器$(".schedule")或ID选择器$("#schedule")
Django模板变量未做安全处理：直接输出{{schedule_data}}可能会被Django自动转义特殊字符，导致JS语法错误。

解决方案

步骤1：修正脚本加载顺序

方案一（推荐）：移除jQuery引入的defer属性，保证依赖jQuery的脚本在jQuery之后加载：

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- jQuery schedule display (includes css and js) -->
<link rel="stylesheet" href="{% static 'Dynamic-Weekly-Scheduler-jQuery-Schedule/dist/jquery.schedule.css' %}">
<script src="{% static 'Dynamic-Weekly-Scheduler-jQuery-Schedule/dist/jquery.schedule.js' %}"></script>

方案二（需要保留defer的场景）：给所有依赖jQuery的脚本都添加defer属性，保持引入顺序不变。

步骤2：修正初始化脚本

确保初始化代码在DOM和所有依赖脚本加载完成后执行，同时修正选择器和模板变量输出：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const scheduleData = {{ schedule_data|safe }};
  console.log(scheduleData);
  // 此处替换为你实际的容器选择器
  $("#schedule").jqs(scheduleData);
});
</script>