页面刷新,除非我将js文件放在模板本身内

我的网站上有一个处理“喜欢”的js文件。每个帖子的like部分位于单独的html文件中。除非我将js文件放入模板本身(而不是基本html文件),否则第二次单击后页面将刷新。

这是我的ajax函数;

$(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);
            },
        });
    });
})

这是我的模板:

{% load static %}
<form class="buzz-like-form"  method="POST">
    {% csrf_token %}
    {% if request.user in buzz.likes.all %}
    <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' %}">
        <i class="fas  mr-2 fa-thumbs-up" style="color:  rgb(43, 98, 153);"></i><span class="text-muted small">{{ buzz.likes.count }}</span></button> 

    <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' %}">
        <i class="fas mr-2 fa-thumbs-down"  style="color:  rgb(185, 186, 187);"></i><span class="text-muted small">{{ buzz.dislikes.count }}</span></button> 

    {% elif request.user in buzz.dislikes.all %}

    <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' %}">
        <i class="fas mr-2 fa-thumbs-up" style="color:  rgb(185, 186, 187);"></i><span class="text-muted small">{{ buzz.likes.count }}</span></button>

    <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' %}">
    <i class="fas mr-2 fa-thumbs-down" style="color:  rgb(240, 78, 78);"></i><span class="text-muted small">{{ buzz.dislikes.count }}</span></button>

    {% else %}

    <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' %}">
        <i class="fas mr-2 fa-thumbs-up"  style="color:  rgb(185, 186, 187);"></i><span class="text-muted small">{{ buzz.likes.count }}</span></button>

    <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' %}">
        <i class="fas mr-2 fa-thumbs-down"  style="color:  rgb(185, 186, 187);"></i><span class="text-muted small">{{ buzz.dislikes.count }}</span></button>

    {% endif %}
</form>

除非我将脚本添加到基本模板的末尾,否则如果在我按下“喜欢”按钮后的第一次ajax调用之后,它将刷新页面,并且只有将其放在“喜欢”模板​​中后,我才能使其正常工作。为什么会这样呢?

评论