时间戳

首页 > 解决方案 > JQuery 与 Django 基础 .js 文件冲突

javascript - JQuery 与 Django 基础 .js 文件冲突

问题描述

我在 Django 中有一个基本模板，我在其中使用 app.js。这个 app.js 用于主题。

现在我想通过 ajax 弹出模态，为此我需要调用 Jquery 函数。弹出模式按钮所在的页面正在扩展 base.html。因此，当我尝试调用该页面时，我收到以下错误。

控制台错误 在此处输入图像描述

但是，当我不在我的页面上扩展 base.html 时，我没有收到任何错误并且能够拥有弹出模式。这是我页面的代码

新页面

{% extends 'base.html' %}
 {% load static %}
{% include "devices/_modal.html" %}


{% block content %}
  <div class="container mt-3">
        <div class="row">
          <div class="col-12 mb-3">

            <button class="create-book btn btn-primary" type="button" name="button">
              <span class="fa fa-plus mr-2"></span>Create book</button>
          </div>

        </div>


  </div>


{% endblock  %}

{% block extra_js %}


    <script type="text/javascript" charset="utf8"  src="{% static "user/js/jQuery-3.3.1.js"%}"></script>
        <script type="text/javascript"  src="{% static "user/js/bootstrap.min.js" %}"></script>
    <script type="text/javascript" charset="utf8"  src="{% static "user/js/jquery.bootstrap.modal.forms.min.js"%}"></script>

    <script type="text/javascript">
    $(function () {
      $(".create-book").modalForm({formURL: "{% url 'addLocation' %}"});

    });
    </script>

{% endblock extra_js %}

我的 base.html 是 

<!DOCTYPE html>
{% load user_tags %}
 {% load static %}

<html lang="en">
<head>

{% block extra_head %}{% endblock %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{% static "user/images/favicon.ico"%}" type="image/x-icon">
    <title>Power Management</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'user/css/app.css' %}">
    <style>
        .loader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F5F8FA;
            z-index: 9998;
            text-align: center;
        }

        .plane-container {
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
    <body class="light">
        {% block content %}
        {% endblock %}

         {% block grid  %}
        {% endblock %}

        {% block scripts %}

            <script src="{% static "user/js/app.js" %}"></script>
        {% endblock %}
        {% block extra_js %}

        {% endblock extra_js %}
    </body>
</html>

是否有任何解决方法。我怎样才能调用我的 Jquery？

标签： javascriptjqueryajaxdjangodjango-templates

解决方案

我个人没有使用过 Django，但我认为您可以使用 noConflict 函数来避免在 JQuery 调用中使用美元符号 ($)。

你可以像这样使用它：

JQuery.noConflict();
JQuery(document).ready(function() {
    //Code
});

如果需要，您可以通过将变量分配给 JQuery.noConflict() 来使用自己的别名，例如：

var customJQueryCall = JQuery.noConflict();
customJQueryCall(document).ready(function() {
    //Code
});

你也可以在他们的 API 中查看：

https://api.jquery.com/jquery.noconflict/

推荐阅读