Django结合Vanilla JS异步编辑帖子 获取post id未定义报错求解

报错根因 #

Uncaught ReferenceError: id is not defined 报错的核心原因是事件绑定逻辑中直接引用了未声明的id变量，没有正确从编辑按钮的属性中提取关联的post id。
你在模板中给编辑按钮设置的id格式为edit_btn-{{post.id}}，比如id为2的帖子对应按钮id为edit_btn-2，需要从该属性中拆分提取post id，不能直接调用未定义的id变量。 #

修复方案 #

方案1：事件委托（推荐，支持动态加载的帖子） #

直接给父容器绑定点击事件，不需要遍历所有按钮，性能更好也适配后续动态渲染的帖子：

// 可替换为帖子列表的父容器id，缩小事件监听范围
document.addEventListener('click', e => {
  // 校验点击目标是否为编辑按钮
  if (e.target?.id?.startsWith('edit_btn-')) {
    // 从按钮id中拆分post id
    const postId = e.target.id.split('-')[1];
    console.log('待编辑帖子id：', postId);
    // 此处编写后续fetch请求逻辑
  }
})

方案2：遍历绑定事件（适配静态渲染场景） #

如果页面帖子都是首次渲染时加载的，也可以遍历所有编辑按钮单独绑定事件：

document.querySelectorAll('[id^="edit_btn-"]').forEach(btn => {
  btn.addEventListener('click', function() {
    const postId = this.id.split('-')[1];
    console.log('待编辑帖子id：', postId);
  })
})

优化建议：用自定义data属性存id更易维护 #

直接在模板的编辑按钮上添加data-*自定义属性存储post id，不需要拆分字符串，可读性更高：

<!-- 模板中编辑按钮代码 -->
<button id="edit_btn-{{post.id}}" data-post-id="{{post.id}}">编辑</button>

JS中直接读取属性即可：

const postId = e.target.dataset.postId;

后续fetch请求参考 #

拿到post id后调用后端编辑接口的示例代码：

fetch(`/edit/${postId}`)
  .then(res => res.json())
  .then(postData => {
    // 填充帖子内容到编辑输入框/弹窗，完成后续编辑逻辑
  })
  .catch(err => console.error('接口请求失败：', err))

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