Django循环中jQuery PreventDefault仅对首个元素生效问题

你碰到的这个问题很典型——HTML规范里ID必须是页面唯一的，但你在Django的for循环里给每篇文章的点赞按钮都用了id="like-btn"，jQuery的$("#like-btn")只会匹配DOM中第一个出现的该ID元素，所以只有第一篇文章的按钮能触发preventDefault()和后续逻辑。

下面是具体的修复方案：

第一步：修改Django模板，用Class替代重复ID #

把模板里的按钮ID换成Class，同时给按钮和点赞数元素加上唯一标识的属性，方便后续AJAX操作定位：

{% for post in list %}
# {{ post.title }}
<!-- 其他相关内容 -->
<a href="" class="like-btn" data-post-id="{{ post.id }}" data-href="{% url 'your_like_api_url' post.id %}">点赞</a>
<span class="like-count" id="like-count-{{ post.id }}">{{ post.like.count }}</span>
{% endfor %}

这里做了几个关键调整：

• 把id="like-btn"改成class="like-btn"，让所有点赞按钮属于同一类
• 用data-post-id存储当前文章的ID，AJAX请求时能精准定位
• 给点赞数的span设置唯一IDlike-count-{{ post.id }}，方便后续更新数值
• data-href直接用Django的url标签生成对应的API接口地址（记得替换成你实际的URL名称）

第二步：修改jQuery代码，绑定Class并使用$(this)定位当前元素 #

现在用类选择器绑定所有点赞按钮的点击事件，通过$(this)获取当前点击的按钮，避免混淆不同文章的元素：

$(document).ready(function(){
  // 绑定所有.like-btn类的点击事件
  $(".like-btn").click(function(e){
    e.preventDefault(); // 现在每个按钮都会触发阻止默认跳转
    
    // 获取当前点击按钮的相关属性
    const $currentBtn = $(this);
    const postId = $currentBtn.data('post-id');
    const likeApiUrl = $currentBtn.data('href');
    
    // 这里编写你的AJAX逻辑示例
    $.ajax({
      url: likeApiUrl,
      type: 'POST',
      data: {
        'post_id': postId,
        // Django POST请求必须携带CSRF Token
        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
      },
      success: function(response){
        // 更新对应文章的点赞数
        $(`#like-count-${postId}`).text(response.new_like_count);
      },
      error: function(){
        // 可以加个错误提示逻辑
        alert('点赞失败，请稍后重试');
      }
    });
  });
});

额外提醒 #

1. 永远不要在循环渲染的元素里重复使用相同ID，Class才是用来标记一组同类型元素的正确方式
2. 用$(this)能精准获取当前触发事件的DOM元素，是处理批量元素事件的核心技巧
3. Django的POST请求必须携带CSRF Token，否则会返回403禁止访问错误（如果用的是GET请求可以忽略，但点赞这类操作建议用POST）

内容的提问来源于stack exchange，提问作者LeLouch