使用純JavaScript移入文件時，jQuery腳本不起作用

Question

我有正常運行的javascript和jQuery文件。 我嘗試將jQuery AJAX復制到其他文件中，但是不起作用。 它向我顯示了返回的JSON信息，而不包含其所在的模板，而不是AJAX 。

視圖

def customer_profile(request, pk):
    name = get_object_or_404(CEName, id=pk)
    name_form = NameForm(instance=name)
    return render(
        request,
        'customer/customer_profile.html',
        {'name':name, 'NameForm': name_form}
    )


def update_profile(request, pk):
    if request.POST:
        name = get_object_or_404(CEName, id=pk)
        name_form = NameForm(data=request.POST, instance=name)
        if name_form.is_valid():
            name_form.save()
            updated_name = get_object_or_404(CEName, id=name.id)
            name_json = render_to_string(
                'ce_profiles/name_json.html',
                {'name_json': updated_name,}
            )
            return JsonResponse({'name_json': name_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>

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)}
    });
  });
});

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_profiles_jquery.js的script鏈接並嘗試更新顯示的名稱時，瀏覽器中顯示的所有內容是： name_json: "<div id\\"name_json\\">\\n The Name\\n</div>"

???

Answer 1

通過檢查瀏覽器中的源，檢查模板中是否引用了正確的javascript文件。

我在測試環境中運行了您的代碼，一切正常。 當我注釋掉您的jQuery代碼時，表單正常提交，隨后顯示以下頁面：

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

如果您在瀏覽器控制台中未收到任何錯誤，則對{% static 'ce_profiles/ce_profiles.js' %}引用可能是沒有jQuery代碼的其他文件。