title: Page refreshes unless I put js file inside the template itself
body: <p>I have a js file that handle "likes" on my website. The like section for each post is in a separate HTML file. Unless I put the js file in the template itself (rather than the base HTML file) the page refreshes after second click. </p>
  
  <p>This is my AJAX function:</p>
  
  <pre><code>$(document).ready(function (e) {
      $('.buzz-like-form').on("click", ".buzz-like-btn", function (e) {
          e.preventDefault();
          e.stopImmediatePropagation();
          var btn = $(this)
          var tk = $(this).attr("data-token");
          $.ajax({
              type: "POST",
              url: $(this).attr("data-url"),
              dataType: 'json',
              data: $(this).closest("form").serialize(),
              success: function (data){
                  $(btn).closest(".buzz-likes-container").html(data.buzz);
              },
              error: function(rs, e){
                  console.log(rs.responeText);
              },
          });
      });
  })
  </code></pre>
  
  <p>This is my template:</p>
  
  <pre><code>{% load static %}
  &lt;form class="buzz-like-form"  method="POST"&gt;
      {% csrf_token %}
      {% if request.user in buzz.likes.all %}
      &lt;button class="btn no-border p-0 mr-4  btn-md  buzz-like-btn button-hide-outline" type="submit" 
          data-url="{% url 'home:buzz-like' guid_url=buzz.guid_url  status='rmvlike' %}"&gt;
          &lt;i class="fas  mr-2 fa-thumbs-up" style="color:  rgb(43, 98, 153);"&gt;&lt;/i&gt;&lt;span class="text-muted small"&gt;{{ buzz.likes.count }}&lt;/span&gt;&lt;/button&gt; 
  
      &lt;button class="btn no-border p-0 mr-4 btn-md buzz-like-btn button-hide-outline" type="submit" 
           data-url="{% url 'home:buzz-like' guid_url=buzz.guid_url  status='udislike' %}"&gt;
          &lt;i class="fas mr-2 fa-thumbs-down"  style="color:  rgb(185, 186, 187);"&gt;&lt;/i&gt;&lt;span class="text-muted small"&gt;{{ buzz.dislikes.count }}&lt;/span&gt;&lt;/button&gt; 
  
      {% elif request.user in buzz.dislikes.all %}
  
      &lt;button class="btn no-border p-0 mr-4 btn-md  buzz-like-btn  button-hide-outline" type="submit" 
          data-url="{% url 'home:buzz-like' guid_url=buzz.guid_url  status='ulike' %}"&gt;
          &lt;i class="fas mr-2 fa-thumbs-up" style="color:  rgb(185, 186, 187);"&gt;&lt;/i&gt;&lt;span class="text-muted small"&gt;{{ buzz.likes.count }}&lt;/span&gt;&lt;/button&gt;
  
      &lt;button class="btn no-border p-0 mr-4 btn-md  buzz-like-btn  button-hide-outline" type="submit" 
       data-url="{% url 'home:buzz-like' guid_url=buzz.guid_url  status='rmvdislike' %}"&gt;
      &lt;i class="fas mr-2 fa-thumbs-down" style="color:  rgb(240, 78, 78);"&gt;&lt;/i&gt;&lt;span class="text-muted small"&gt;{{ buzz.dislikes.count }}&lt;/span&gt;&lt;/button&gt;
  
      {% else %}
  
      &lt;button class="btn no-border p-0 mr-4  btn-md  buzz-like-btn  button-hide-outline" type="submit" 
          data-url="{% url 'home:buzz-like' guid_url=buzz.guid_url  status='like' %}"&gt;
          &lt;i class="fas mr-2 fa-thumbs-up"  style="color:  rgb(185, 186, 187);"&gt;&lt;/i&gt;&lt;span class="text-muted small"&gt;{{ buzz.likes.count }}&lt;/span&gt;&lt;/button&gt;
  
      &lt;button class="btn no-border p-0 mr-4 btn-md buzz-like-btn  button-hide-outline" type="submit" 
         data-url="{% url 'home:buzz-like' guid_url=buzz.guid_url  status='dislike' %}"&gt;
          &lt;i class="fas mr-2 fa-thumbs-down"  style="color:  rgb(185, 186, 187);"&gt;&lt;/i&gt;&lt;span class="text-muted small"&gt;{{ buzz.dislikes.count }}&lt;/span&gt;&lt;/button&gt;
  
      {% endif %}
  &lt;/form&gt;
  </code></pre>
  
  <p>Unless I add the script to the end of the base template the after first AJAX call if I click on a like button it will refresh the page and I can only get it to work if I put it inside the "like" template. Why is this happening?</p>
  
  <p>This is where it is supposed to be refreshed:</p>
  
  <pre><code>&lt;div class="mr-1 buzz-likes-container"&gt;
      {% include 'home/buzz/buzz_like.html' %}
  &lt;/div&gt;
  </code></pre>
  
  <p>This part is where the form is and should be refreshed.</p>
  
  <p>I was wondering if this will resolve the issue: </p>
  
  <pre><code>&lt;div class="mr-1 buzz-likes-container"&gt;
      &lt;div&gt;
          {% include 'home/buzz/buzz_like.html' %}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And use in the <code>success</code> function? (I tried and it is not working)</p>
  
  <pre><code> $(btn).closest(".buzz-likes-container div").html(data.buzz);
  </code></pre>