Question

我收到错误：＆＃34;未捕获的ReferenceError：$未定义＆＃34;。

以下是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中找到的，我可以读到：＆＃34;给我一些日志＆＃34;。但是我收到错误：＆＃34;未捕获的ReferenceError：$未定义＆＃34;。好像没找到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>

Answer 1

您应该考虑在<script src="{% static 'component/js/component.js' %}"></script>

中添加此脚本{% block jquery %}{% endblock jquery %}

这样，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 %}

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

1 个答案: