页面含多个相同表单时，如何为目标表单追加评论？

你的问题核心在于事件绑定对象错误、动态元素事件绑定方式不对，同时获取对应评论区的逻辑也需要调整，以下是具体解决步骤：

1. 修正事件绑定逻辑 #

submit事件属于<form>元素，而非输入框（.comment-section）。且由于表单是动态生成的，不能用普通的.submit()绑定，必须通过事件委托（父元素代理监听动态元素事件）实现。

添加这段事件委托代码：

// 监听所有动态生成的.comment-form提交事件
$('#feed').on('submit', '.comment-form', function(e) {
  e.preventDefault(); // 阻止表单默认跳转行为
  
  // 获取当前表单的评论输入值
  const commentContent = $(this).find('.comment-section').val().trim();
  if (!commentContent) return; // 空评论不处理
  
  // 定位到当前帖子对应的评论列表
  const targetCommentList = $(this).closest('.post').find('.comment-list');
  
  // 添加新评论到列表
  targetCommentList.append(`<li>${commentContent}</li>`);
  
  // 显示评论列表（移除隐藏类）
  targetCommentList.removeClass('hidden');
  
  // 清空输入框
  $(this).find('.comment-section').val('');
});

2. 修正动态HTML生成的转义问题 #

你代码中使用<和>会导致HTML被转义成文本，页面显示的是标签字符串而非实际DOM元素，需直接写入HTML标签：

function newPost (imgSrc) {
  $('#feed').append('<div class="post"></div>');
  const newPost = $('.post').last();
  newPost.append(`<img class="feed-img" src="${imgSrc}">`);
  newPost.append('<div class="user-block"></div>');
  const userBlock = $('.user-block').last();
  userBlock.after('<ul class="comment-list"></ul>');
  $('.comment-list').last().addClass('hidden'); // 直接添加隐藏类，避免toggleClass的意外切换
  newPost.append('<form class="comment-form"><input type="text" name="comment" placeholder="Add a comment..." class="comment-section"><input type="submit" value="Post" class="submit-comment"></form>');
}

3. 补充基础HTML结构 #

你原HTML缺少帖子容器，需添加核心容器节点：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 帖子挂载容器，必须存在 -->
<div id="feed"></div>

核心逻辑说明 #

• 事件委托：通过父容器#feed监听所有子元素中.comment-form的提交事件，无论表单是静态还是动态生成，都能正常触发。
• 精准定位评论区：用$(this).closest('.post')找到当前提交表单所属的帖子容器，再通过.find('.comment-list')定位到对应评论列表，确保评论添加到正确位置。
• 阻止默认行为：e.preventDefault()彻底阻断表单默认跳转，避免页面刷新丢失状态。

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