如何在Django表单的Media元类中正常使用jQuery功能？

问题根因 #

核心原因是JavaScript加载顺序错误：
你在base.html中把jQuery的加载逻辑放在了{% block content %}的下方，而{{ form.media }}是写在content块里的，渲染顺序如下：

1. 先渲染content块内的内容：执行form.html里的内联JS → 加载form.media引入的custom_tag_widget.js，此时jQuery还没加载，所以调用$直接报未定义错误
2. 再渲染{% block javascript %}的内容：加载jQuery → 执行base.html的JS → 执行create.html的JS，和你控制台的输出顺序完全吻合。
   另外补充：include引入的子模板中定义的{% block javascript %}不会生效，只有用extends继承的模板才能覆盖父模板的块，所以form.html里的JS块属于冗余代码，可以直接删除。

解决方法 #

方案1（推荐）：把form.media移到javascript块内加载 #

修改create.html的代码，将{{ form.media }}移到jQuery加载完成后的javascript块中：

{% extends "base.html" %}
{% load static %}
{% block javascript %}
  {{ block.super }}
  {% if form %}
    {{ form.media }}
  {% endif %}
  <script type="text/javascript">
    console.log('create.html js');
  </script>
{% endblock javascript %}
{% block content %}
  {% if form %}
    {% include 'form.html' %}
  {% endif %}
{% endblock content %}

调整后custom_tag_widget.js会在jQuery加载完成后再执行，不会再报$未定义错误。

方案2：调整jQuery的加载位置 #

如果不想修改form.media的放置位置，可以直接把base.html里的jQuery加载逻辑移到<head>标签内，保证jQuery在页面所有其他JS执行前加载完成即可。

方案3：修改custom_tag_widget.js的依赖逻辑 #

如果不方便调整加载顺序，可以修改JS代码避免直接依赖提前加载的jQuery：

// 等待原生DOM加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 此时jQuery已经加载完成
  if (window.$) {
    console.log('form media js');
    // 其他jQuery逻辑写在这里
  }
});

内容的提问来源于stack exchange，提问作者Alberto Sanmartin Martinez