This is a long one :)
我有一个生成几个元素的异步函数。我的问题是我想控制台记录我单击的元素的标题。我以前使用 e.target 指向元素，但它总是返回第一个元素的标题。我将提供 HTML 和脚本，非常感谢任何帮助
HTML：
脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HomeChow</title>
<link rel="stylesheet" href="style.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Exo:wght@500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Hero Section -->
<div class="hero">
<nav class="navbar">
<div class="logo">HomeChow</div>
<div class="menu">
<ul>
<li>Shop</li>
<li>Features</li>
<li>Recipes</li>
<li>Hotline</li>
</ul>
</div>
<div class="sigin_signup">
<p class="login">Login</p>
<p class="signup">SignUp</p>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="main_content">
<!-- Search Row -->
<div class="search_row">
<p id="search_title">Recipe</p>
<input
type="text"
class=""
id="search_bar"
placeholder="Search Recipes and Ingredients"
/>
<div id="sort_by">
<select>
<option value="newest">Sort by: newest</option>
<option value="oldest">Sort by: oldest</option>
</select>
</div>
</div>
<!-- Categories -->
<div class="details_row">
<div class="main_content_menu">
<div class="categories">
<div class="menu_items">
<button class="menu_btn" id="breakfast" data-category="Breakfast">
Breakfast
</button>
<button class="menu_btn" id="dessert" data-category="Dessert">
Dessert
</button>
<button
class="menu_btn"
id="miscellaneous"
data-category="Miscellaneous"
>
Miscellaneous
</button>
<button class="menu_btn" id="pasta" data-category="Pasta">
Pasta
</button>
<button class="menu_btn" id="seafood" data-category="Seafood">
Seafood
</button>
<button class="menu_btn" id="side" data-category="Side">
Side
</button>
<button class="menu_btn" id="starter" data-category="Starter">
Starter
</button>
<button class="menu_btn" id="vegan" data-category="Vegan">
Vegan
</button>
<button
class="menu_btn"
id="vegetarian"
data-category="Vegetarian"
>
Vegetarian
</button>
</div>
</div>
</div>
<!-- FILTER BY CATEGORY -->
<div class="column2">
</div>
<!--END OF FILTER BY CATEGORY -->
<div class="footer"></div>
<script src="./app.js"></script>
</body>
</html>`
let column2 = document.querySelector(".column2");
//Other working functions here
// Selecting an option from the results -- The issue!!
column2.addEventListener("click", (e) => {
console.log("column 2 clicked");
if (e.target.classList.contains("category_food_search_results")) {
const foodDetailsContainer = document.querySelector(
".category_food_details"
);
const foodTitle = foodDetailsContainer.querySelector(
".category_food_title"
);
console.log(foodTitle.textContent); }});
您的问题是您使用的是
document.querySelector(".category_food_details")e.target.querySelector(".category_food_details")因此，您的代码获取文档中具有
category_food_details