JavaScript事件委托中动态生成子元素的精确查找与定位

<div class="column2">
  <!-- 动态生成的子元素 -->
  <div class="category_food_search_results">
    <div class="category_food_details">
      <h3 class="category_food_title">Food Item 1 Title</h3>
      <!-- 其他内容 -->
    </div>
  </div>
  <div class="category_food_search_results">
    <div class="category_food_details">
      <h3 class="category_food_title">Food Item 2 Title</h3>
      <!-- 其他内容 -->
    </div>
  </div>
  <!-- ...更多动态生成的元素 -->
</div>

let column2 = document.querySelector(".column2");

column2.addEventListener("click", (e) => {
  // 检查点击事件是否发生在目标元素上
  if (e.target.classList.contains("category_food_search_results")) {
    // 错误的做法：使用 document.querySelector
    // 这将总是返回文档中第一个匹配 ".category_food_details" 的元素
    const foodDetailsContainer = document.querySelector(".category_food_details");
    const foodTitle = foodDetailsContainer.querySelector(".category_food_title");
    console.log(foodTitle.textContent);
  }
});

let column2 = document.querySelector(".column2");

column2.addEventListener("click", (e) => {
  // 确保点击的是我们关注的动态生成的元素
  // 注意：e.target 可能是 .category_food_search_results 本身，
  // 也可能是其内部的 .category_food_details 或 .category_food_title 等。
  // 为了确保我们总是从 .category_food_search_results 开始查询，
  // 可以使用 e.target.closest() 方法。
  const clickedResult = e.target.closest(".category_food_search_results");

  if (clickedResult) { // 确保点击发生在有效的 .category_food_search_results 元素内
    // 正确的做法：在 clickedResult（即被点击的 .category_food_search_results 元素）内部查找
    const foodDetailsContainer = clickedResult.querySelector(".category_food_details");
    if (foodDetailsContainer) { // 确保找到了 foodDetailsContainer
      const foodTitle = foodDetailsContainer.querySelector(".category_food_title");
      if (foodTitle) { // 确保找到了 foodTitle
        console.log(foodTitle.textContent);
      }
    }
  }
});

<div class="category_food_search_results" data-food-id="123" data-food-category="Dessert">
  <div class="category_food_details">
    <h3 class="category_food_title">Chocolate Cake</h3>
  </div>
</div>

const clickedResult = e.target.closest(".category_food_search_results");
if (clickedResult) {
  console.log("Food ID:", clickedResult.dataset.foodId);
  console.log("Food Category:", clickedResult.dataset.foodCategory);
  // 仍然可以获取标题
  const foodTitle = clickedResult.querySelector(".category_food_title");
  if (foodTitle) {
    console.log("Food Title:", foodTitle.textContent);
  }
}