Javascript 单击事件侦听器多次激发

我有一个嵌套的

标签，显示喜欢或不喜欢的心。问题是，每次一篇文章被喜欢时，它都会发送大约16个请求（事件触发16次）。我试过使用

sleep

，和

seTimeout

，但都没有用。我需要动态地将事件侦听器添加到

标记中

首字母\u 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 %}

{%if用户在post.get_likers%}
{{post.total_likes}
{%else%}
{{post.total_likes}
{%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();
    });
}

document.addEventListener（“DOMContentLoaded”，（）=>{
加载_clickable（）；
});
函数加载\可点击（）{
document.querySelectorAll（“i”）.forEach（（项目）=>{
item.addEventListener（“单击”，（）=>{
更新（项目）；
});
});
}
功能更新（项目）{
const p_tag=item.parentNode；
const post_id=p_tag.parentNode.id；
log（post_id，p_tag.innerText）；
常量fetch_url=`/like/${post_id}`；
fetch（fetch_url{
方法：“张贴”，
})
.then（（response）=>response.json（））
。然后（（结果）=>{
if（result.like）{
log（“Has like”）；
var new_likes=parseInt（p_tag.innerText）+1；
p_tag.innerHTML=`${new_likes}`；
}else if（结果不一样）{
console.log（“已取消链接”）；
var new_likes=parseInt（p_tag.innerText）-1；
p_tag.innerHTML=`${new_likes}`；
}
加载_clickable（）；
});
}

---

如何使每个事件触发一次？

问题是，在更新like之后，您正在调用

load\u clickable

，这将再次向所有

元素添加事件侦听器。相反，您应该在

中显示喜欢的数量，并每次更新

文本内容

，这样您就不需要再次附加所有事件侦听器

更新的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 %}

---

调用load_clickable方法是个问题，click事件在技术上仍然处于活动状态，为什么不将

onclick

attr加载到新的i标记，就像这样

.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" onclick=update_likes(this)></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" onclick=update_likes(this)></i> ${new_likes}`;
      }
    });

。然后（（结果）=>{
if（result.like）{
log（“Has like”）；
var new_likes=parseInt（p_tag.innerText）+1；
p_tag.innerHTML=`${new_likes}`；
}else if（结果不一样）{
console.log（“已取消链接”）；
var new_likes=parseInt（p_tag.innerText）-1；
p_tag.innerHTML=`${new_likes}`；
}
});

最佳解决方案

{% if user in post.get_likers%}
        <p class="my-0 text-muted"><i style="color: red;" class="fas fa-heart hover onclick=update_likes()"></i> <span>{{post.total_likes}}</span></p>
{% else %}
        <p class="my-0 text-muted"><i class="far fa-heart hover onclick=update_likes()"></i> <span>{{post.total_likes}}</span></p>
{% endif %}

{%if用户在post.get_likers%}
{{post.total_likes}
{%else%}
{{post.total_likes}
{%endif%}

然后是javascript

document.addEventListener（“DOMContentLoaded”，（）=>{
//使用加载的DOM执行其他操作
});
函数更新_likes（）{
const p_tag=this.parentNode；
const post_id=p_tag.parentNode.id；
log（post_id，p_tag.innerText）；
常量fetch_url=`/like/${post_id}`；
fetch（fetch_url{
方法：“张贴”，
})
.then（（response）=>response.json（））
。然后（（结果）=>{
if（result.like）{
log（“Has like”）；
var new_likes=parseInt（p_tag.innerText）+1；
p_tag.innerHTML=`${new_likes}`；
}else if（结果不一样）{
console.log（“已取消链接”）；
var new_likes=parseInt（p_tag.innerText）-1；
p_tag.innerHTML=`${new_likes}`；
}
});
}

---

这样，所有标记都已使用它们的标记呈现

如果我添加一个

，类似的标记也将变为红色，并且文本的样式也不同too@Jjkivai为什么会是红色的？你有针对

儿童的CSS吗？我做错了，我在

中添加了

，这很有效

{% if user in post.get_likers%}
        <p class="my-0 text-muted"><i style="color: red;" class="fas fa-heart hover onclick=update_likes()"></i> <span>{{post.total_likes}}</span></p>
{% else %}
        <p class="my-0 text-muted"><i class="far fa-heart hover onclick=update_likes()"></i> <span>{{post.total_likes}}</span></p>
{% endif %}

document.addEventListener("DOMContentLoaded", () => {
    //do something else with loaded DOM
});

function update_likes() {
  const p_tag = this.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" onclick=update_likes(this)></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" onclick=update_likes(this)></i> ${new_likes}`;
      }
    });
}