我有一个嵌套的<i>
显示喜欢或不喜欢的心的标签。问题是,每次喜欢一个帖子时,它都会发送大约 16 个请求(事件触发 16 次)。我尝试过使用 sleep
,和seTimeout
无济于事。我需要将事件监听器动态添加到 <i>
标签。
initial_html
{% if user in post.get_likers%}
<p class="my-0 text-muted"><i style="color: red;" class="fas fa-heart hover"></i> {{post.total_likes}}</p>
{% else %}
<p class="my-0 text-muted"><i class="far fa-heart hover"></i> {{post.total_likes}}</p>
{% endif %}
尝试更新每次观看的点赞次数
document.addEventListener("DOMContentLoaded", () => {
load_clickable();
});
function load_clickable() {
document.querySelectorAll("i").forEach((item) => {
item.addEventListener("click", () => {
update_likes(item);
});
});
}
function update_likes(item) {
const p_tag = item.parentNode;
const post_id = p_tag.parentNode.id;
console.log(post_id, p_tag.innerText);
const fetch_url = `/like/${post_id}`;
fetch(fetch_url, {
method: "POST",
})
.then((response) => response.json())
.then((result) => {
if (result.like) {
console.log("Has Liked");
var new_likes = parseInt(p_tag.innerText) + 1;
p_tag.innerHTML = `<i style="color: red;" class="fas fa-heart hover"></i> ${new_likes}`;
} else if (result.unlike) {
console.log("Has unliked");
var new_likes = parseInt(p_tag.innerText) - 1;
p_tag.innerHTML = `<i class="far fa-heart hover"></i> ${new_likes}`;
}
load_clickable();
});
}
如何让每个事件触发一次?
最佳答案
问题是您正在调用 load_clickable
更新点赞后,会将事件监听器添加到所有 <i>
再次元素。相反,您应该在 <span>
中显示喜欢的数量。并更新textContent
每次这样您就不需要再次附加所有事件监听器。
更新的 HTML:
{% if user in post.get_likers%}
<p class="my-0 text-muted"><i style="color: red;" class="fas fa-heart hover"></i> <span>{{post.total_likes}}</span></p>
{% else %}
<p class="my-0 text-muted"><i class="far fa-heart hover"></i> <span>{{post.total_likes}}</span></p>
{% endif %}
更新了 JavaScript(为简洁起见,省略了部分内容):
//...
.then((result) => {
if (result.like) {
console.log("Has Liked");
var new_likes = parseInt(p_tag.innerText) + 1;
p_tag.querySelector('span').textContent = new_likes;
} else if (result.unlike) {
console.log("Has unliked");
var new_likes = parseInt(p_tag.innerText) - 1;
p_tag.querySelector('span').textContent = new_likes;
}
});
//...
关于javascript - 单击事件监听器多次触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63288658/