我的网站上有一个处理“喜欢”的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调用之后,它将刷新页面,并且只有将其放在“喜欢”模板中后,我才能使其正常工作。为什么会这样呢?