title: jQuery script doesn't work when moved into a file with plain javascript
body: <p>I have functioning <code>javascript</code> and <code>jQuery</code> files. I tried copying the <code>jQuery AJAX</code> into my other file, but It doesn't work. Instead of <code>AJAX</code>ing, it shows me the <code>JSON</code> info returned without the the template it was in. ?</p>
  
  <p>View</p>
  
  <pre><code>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})
  </code></pre>
  
  <p>templates</p>
  
  <pre><code>{% extends 'base.html' %}
  {% load static %}
  
  {% block content %}
    {% include 'ce_profiles/name_header.html' %}
    &lt;div id="name" class="container d-flex justify-content-between pt-1"&gt;
      &lt;div id="name_json"&gt;
        {{ name }}
      &lt;/div&gt;
      &lt;button id="update_button" class="bold btn btn-main btn-sm button-main"&gt;UPDATE&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="div_NameForm" class="container" style="display: none;"&gt;
      &lt;hr size="3px"&gt;
      &lt;form id="NameForm" method="POST" action="{% url 'customer:update-profile' name.id %}"&gt;
        {% csrf_token %}
        {{ NameForm.as_p }}
        &lt;br&gt;
        &lt;button id="save_changes" type="submit" class="btn btn-main button-main btn-block"&gt;Save Changes&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  {% endblock %}
  
  {% block script %}
    &lt;script src="{% static 'ce_profiles/ce_profiles.js' %}"&gt;&lt;/script&gt;
    &lt;script src="{% static 'ce_profiles/ce_profiles_jquery.js' %}"&gt;&lt;/script&gt;
  {% endblock %}
  
  &lt;div id="name_json"&gt;
    {{ name_json }}
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(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)}
      });
    });
  });
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>$(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);
  });
  </code></pre>
  
  <p>When I delete the <code>script</code> link for <code>ce_profiles_jquery.js</code> and attempt to update the name displayed, all that shows in the browser is:
  <code>name_json:  "&lt;div id\"name_json\"&gt;\n The Name\n&lt;/div&gt;"</code></p>
  
  <p>???</p>