本文讲解如何使用事件委托解决多个商品评论表单只能提交到第一个商品的问题，通过监听父容器的 submit 事件并动态定位目标表单，实现为每个商品独立添加评论。
本文讲解如何使用事件委托解决多个商品评论表单只能提交到第一个商品的问题，通过监听父容器的 submit 事件并动态定位目标表单，实现为每个商品独立添加评论。
在构建商品列表页面时，若为每个商品动态生成独立的评论表单（<form>），却仍沿用 document.getElementById("form") 或 document.querySelector("form") 绑定事件，会导致仅首个表单生效——因为 ID 必须唯一，而 querySelector 默认只匹配第一个元素。根本症结在于事件绑定方式与 DOM 动态结构不匹配。
正确解法是采用事件委托（Event Delegation）：不在每个表单上单独绑定事件，而是将事件监听器注册在所有表单的共同祖先节点（如 .productsCatalog），再通过 event.target 精准定位触发事件的具体表单。
以下是优化后的核心逻辑：
// ✅ 正确：监听整个商品容器的 submit 事件
const productsContainer = document.querySelector(".productsCatalog");
productsContainer.addEventListener('submit', function handleFormSubmit(event) {
event.preventDefault();
// ? 获取实际提交的表单（即被点击的 form 元素）
const form = event.target;
// ? 在该表单内查找其专属的 textarea
const reviewTextarea = form.querySelector('.review');
if (!reviewTextarea || !reviewTextarea.value.trim()) return;
const newReviewText = reviewTextarea.value.trim();
// ? 创建新评论元素
const reviewElement = document.createElement('p');
reviewElement.className = "reviewText";
reviewElement.textContent = newReviewText;
// ⬆️ 插入到该表单之前（即显示在表单上方）
form.before(reviewElement);
// ? 重置当前表单
form.reset();
});同时，需确保动态生成的商品结构保持语义清晰、无重复 ID：
initialData.forEach((product, index) => {
const productCard = document.createElement('div');
productCard.className = "productCard";
const productName = document.createElement('p');
productName.className = "productName";
productName.textContent = product.product;
productCard.append(productName);
const productReviews = document.createElement('div');
productReviews.className = "productReviews";
productReviews.innerHTML = '<h3>Reviews:</h3>';
// 渲染已有评论
product.reviews.forEach(review => {
const reviewEl = document.createElement('p');
reviewEl.className = "reviewText";
reviewEl.textContent = review.text;
productReviews.append(reviewEl);
});
// ? 关键：每个表单无需 id="form"（避免重复ID），可加 data-product-index 做标识（可选）
const addReviewForm = document.createElement('form');
addReviewForm.className = "addReview";
// ❌ 删除 addReviewForm.id = "form"; —— ID 必须唯一，此处禁用
addReviewForm.innerHTML = `
<textarea class="review" name="review" rows="5" cols="33" maxlength="500" required></textarea>
<br><input class="submitButton" type="submit" value="Add Review">
`;
productReviews.append(addReviewForm);
productCard.append(productReviews);
document.querySelector('.productsCatalog').append(productCard);
});✅ 关键注意事项：
- 严禁为多个元素设置相同 ID（如 id="form"），否则 getElementById 行为不可预测，且违反 HTML 规范；
- 使用 event.target 获取实际触发事件的元素，而非全局查询；
- 表单内操作（如 form.querySelector('.review')）确保作用域隔离，避免跨商品误读输入框；
- 添加空值校验（trim()）提升用户体验；
- form.before(reviewElement) 保证新评论始终显示在对应表单上方，视觉归属明确。
通过事件委托，代码更轻量、可扩展性强——即使后续动态追加商品，也无需重新绑定事件，真正实现“一次监听，处处生效”。
