jQuery脚本没有'；当移动到带有纯javascript的文件中时无法工作

我有

javascript

和

jQuery

文件。我尝试将

jqueryajax

复制到另一个文件中，但没有成功。它显示的不是

AJAX

ing，而是返回的

JSON

信息，而不是它所在的模板

看法

模板

{% extends 'base.html' %}
{% load static %}

{% block content %}
  {% include 'ce_profiles/name_header.html' %}
  <div id="name" class="container d-flex justify-content-between pt-1">
    <div id="name_json">
      {{ name }}
    </div>
    <button id="update_button" class="bold btn btn-main btn-sm button-main">UPDATE</button>
  </div>
  <div id="div_NameForm" class="container" style="display: none;">
    <hr size="3px">
    <form id="NameForm" method="POST" action="{% url 'customer:update-profile' name.id %}">
      {% csrf_token %}
      {{ NameForm.as_p }}
      <br>
      <button id="save_changes" type="submit" class="btn btn-main button-main btn-block">Save Changes</button>
    </form>
  </div>
{% endblock %}

{% block script %}
  <script src="{% static 'ce_profiles/ce_profiles.js' %}"></script>
  <script src="{% static 'ce_profiles/ce_profiles_jquery.js' %}"></script>
{% endblock %}

<div id="name_json">
  {{ name_json }}
</div>

javascript

$(document).ready(function() {
  $("#NameForm").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      dataType: 'json',
      success: function(data) {$("#name_json").html(data.name_json)}
    });
  });
});


let updateButton
let toggleNameForm = function(e) {
  e.stopPropagation();
  let x = document.getElementById("div_NameForm");
  let btn = this;
  if (x.style.display === "none") {
    x.style.display = "block";
    btn.innerHTML = "CANCEL";
    btn.classList.replace("button-main", "button-secondary");
  } else {
    x.style.display = "none";
    btn.innerHTML = "UPDATE";
    btn.classList.replace("button-secondary", "button-main");
  }
};


document.addEventListener('DOMContentLoaded', function () {
  updateButton = document.getElementById('update_button');
  updateButton.addEventListener('click', toggleNameForm);
});

当我删除

ce\u profiles\u jquery.js的
script
链接并尝试更新显示的名称时，浏览器中显示的全部内容是：
name\u json:“\n名称\n”

？
通过检查浏览器中的源代码，检查模板中引用的javascript文件是否正确

我在一个测试环境中运行了你的代码，一切正常。当我注释掉您的jQuery代码时，表单正常提交，随后的页面显示：

{name_json: "<div id=\"name_json\">The Name</div>"}

{name_json:“名称”}

如果您的浏览器控制台中没有收到任何错误，那么您对
{%static'ce_profiles/ce_profiles.js%}
的引用可能是一个没有jQuery代码的不同文件。
在javascript部分，为什么要使用
$（document）.ready（function（）{
？我把它放在那里只是为了显示我把jQuery代码放在哪里。我不应该使用它吗？也许你应该只显示完整的js代码而不显示jQuery以避免混淆删除jQuery。这就是我目前所拥有的。嗯。你能在浏览器中打开页面并查看页面源代码以确保jQuery代码确实在那里吗？找到许可证选择
标记并单击源代码以查看它。
$(document).ready(function() {
  $("#NameForm").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      dataType: 'json',
      success: function(data) {$("#name_json").html(data.name_json)}
    });
  });
});


let updateButton
let toggleNameForm = function(e) {
  e.stopPropagation();
  let x = document.getElementById("div_NameForm");
  let btn = this;
  if (x.style.display === "none") {
    x.style.display = "block";
    btn.innerHTML = "CANCEL";
    btn.classList.replace("button-main", "button-secondary");
  } else {
    x.style.display = "none";
    btn.innerHTML = "UPDATE";
    btn.classList.replace("button-secondary", "button-main");
  }
};


document.addEventListener('DOMContentLoaded', function () {
  updateButton = document.getElementById('update_button');
  updateButton.addEventListener('click', toggleNameForm);
});

{name_json: "<div id=\"name_json\">The Name</div>"}