javascript - Django/Jquery PreventDefault 仅适用于 for 循环的第一项

Question

我正在尝试使用 Jquery PreventDefault 在我的 django 博客文章中使用一些 AJAX for loop 但 PreventDefault 仅适用于顶级帖子

模板

{% for posts in list %}
   #{{ posts.title }} and other stuff goes here
    <a href=""  data-href="  " id="like-btn"></a>
    <span data-likes=" {{ posts.like.count }} " id="{{posts.id}}" > {{ posts.like.count }} </span>
{% endfor %}

j查询

$(document).ready(function(){
    $("#like-btn").click(function(e){
            e.preventDefault();
    })

preventDefault 在第一篇文章中运行良好，但不适用于任何其他文章。

Answer 1

这是一个 javascript/html 问题，与 django 无关。 DOM 元素的 id 属性应该是唯一的。因此 You4 #like-btn 唯一标识了一个单独的点赞按钮。在您的情况下，这是第一个喜欢的按钮。您的 HTML 应更改为

{% for posts in list %}
   #{{ posts.title }} and other stuff goes here
    <a href=""  data-href="  " class="like-btn"></a>
    <span data-likes=" {{ posts.like.count }} " id="{{posts.id}}" > {{ posts.like.count }} </span>
{% endfor %}

然后你的js到

$(document).ready(function(){
    $(".like-btn").click(function(e){
           e.preventDefault()
})