定位动态创建的子项

Targeting dynamically created children

提问人：Martin 提问时间：5/13/2023 最后编辑：ArctodusMartin 更新时间：5/14/2023 访问量：28

问： 

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);  }});
JavaScript 父 子 dom-遍历

评论

答：

0赞 Aralicia 5/13/2023 #1

您的问题是您正在使用而不是 .document.querySelector(".category_food_details")e.target.querySelector(".category_food_details")

因此，您的代码将获取文档中具有该类的第一个元素，而不是具有该类的目标中的第一个元素。category_food_details

上一个：querySelector： return为null时如何不调用函数？

下一个：如何选择动态创建的按钮？