找不到 jQuery：未捕获的 ReferenceError：$ 未定义答案

【问题标题】：jQuery not found: Uncaught ReferenceError: $ is not defined找不到 jQuery：未捕获的 ReferenceError：$ 未定义
【发布时间】：2018-10-18 11:12:18
【问题描述】：

我收到错误：“Uncaught ReferenceError: $ is not defined”。

下面是component/templates/component/update.html模板，定义为：

{% extends 'base.html' %}

{% block content %} 

{% load static %}
<script src="{% static 'component/js/component.js' %}"></script>

<h2>Create new component</h2>

{% include 'snippets/form-snippet.html' with form=form %}

{% endblock %}

我将脚本保存在 component/static/component/js/component.js 中。找到该文件是因为在 console.log 中我可以读到：“给我一些日志”。但是我收到错误：“未捕获的 ReferenceError：$ 未定义”。显然没有找到 jQuery，但如何解决这个问题？ component.js 文件定义如下：

console.log("GIVE ME SOME LOG")

$(document).ready(function(){
    hideShow()
})

$('#id_component_type').click(function(){
    hideShow()
});

function hideShow(){
  if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "k_v")
    {
        $('#id_length').parents('p:first').hide();
        $('#id_k_v').parents('p:first').show();
    }else
    {
        $('#id_length').parents('p:first').show();
        $('#id_k_v').parents('p:first').hide();
    }
}

base.html文件定义为：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{% block head_title %}Solarus Calculation Tool{% endblock head_title %}</title>
        {% include 'snippets/css.html' %}
    </head>

    <body>
        {% include 'snippets/nav.html' %}

        <div class='container'>
        {% block content %}
        {% endblock content %}
        </div>

        {% include 'base/js.html' %}

        <script>
        $(document).ready(function(){
          {% block jquery %}{% endblock %}
        })
        </script>
    </body>
</html>

js.html定义为：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>

【问题讨论】：

我要问的是显而易见的。项目中是否包含 jQuery？比如像这样：stackoverflow.com/questions/11525994/…
你的 base.html 怎么样？让我们看看你的 js 调用的结构
我添加了base.html和js.html

标签： jquery django static

【解决方案1】：

您应该考虑在{% block jquery %}{% endblock jquery %} 中添加此脚本<script src="{% static 'component/js/component.js' %}"></script>

这样，Django 会在jQuery 文件之后加载它

不是这个

<script>
    $(document).ready(function(){
      {% block jquery %}{% endblock %}
    })
</script>

以这种方式创建块以避免双重script标签

<script> --> remove this script
    $(document).ready(function(){
    })l;
</script>
{% block jquery %}{% endblock %}

所以当你调用那个块时，你可以打开script标签

{% block jquery %}<script>< /script> {% endblock %}

甚至从其他网站调用一些东西

{% block jquery %}
    <script src="https://cdn.something.com"></script>
    <script src="{% static 'component/js/component.js' %}"></script>
{% endblock %}

【讨论】：

我无法在 {% block jquery %}{% endblock jquery % 中添加 } 我得到更多错误
更新了我的答案，你的结构不够好。尝试调整我的答案结构，如果遇到困难请随时告诉我
是的，谢谢你的提示。但是现在我只是将脚本直接放在我的组件 create.html 和 update.html 模板中。这不是根据 DRY 原则，但要简单得多。