如何在 Django 媒体表单上使用 jQuery

Question

我正在尝试通过媒体元 class.

在 Django 表单上注入额外的 javascript 和 jQuery

我 return 向 create.html 模板提交了一个表单，并使用 js 函数渲染正常，但未执行 jQuery 函数。

base.html 模板：

...
{% block content %}
{% endblock %}
...
{% block javascript %}
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  ...
  <script type="text/javascript">
    console.log('base.html js');
  </script>
{% endblock javascript %}

create.html:

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

form.html:

{% load static %}
{% block javascript %}
  {{ block.super }}
  <script type="text/javascript">
    console.log('create.html js');
  </script>
{% endblock javascript %}
...
{% for field in form %}
  {{ field|add_class:"form-control" }}
{% endfor %}

forms.py:

class PlaceForm(forms.ModelForm):
  class Media:
    js = (
        'js/custom_tag_widget.js',
    )

custom_tag_widget.js:

$(document).ready( function() {
  console.log('form media js');
});

我有此控制台输出并出现错误：

form.html js
ReferenceError: $ is not defined
base.html js
create.html js

有人可以帮助我吗？提前致谢。

Answer 1

请检查 Dev Tools 中的 Network 选项卡，检查您的 js 文件是否没有 return 404，以及 custom_tag_widget.js 的路径是否正确。

另外，有可能是你项目中的static配置不正确。

请检查https://docs.djangoproject.com/en/3.2/howto/static-files/

Answer 2

似乎 jquery 没有正确加载。

我猜是因为你的自定义 js custom_tag_widget.js 在 https://code.jquery.com/jquery-3.3.1.min.js 之前加载了。

检查您的文件在网络中的排序。

如果 jquery 在自定义 js 之后加载，您可以在 HTML 文件

中将块 content 移动到块 javascript 之后

如何在 Django 媒体表单上使用 jQuery

How to use jQuery on Django Media Form

django

jquery

django-forms