JavaScript 事件侦听器与隐藏的 DOM 元素交互

Question

我正在制作工作差旅报销表。我们有 4 种不同的旅行类型，所以我的计划是为每种类型设置一个按钮，当您单击该按钮时，正确的表格会出现在它自己的 <section> 元素中。我正在使用 Bootstrap 4，我的 index.html 文件中的每个表单都有 "d-none" 的 class，以便 none 在加载时显示。

在表格的里程部分，我有一个 Font-Awesome 加号和减号来添加另一行或删除一行。我运行遇到的问题是我的事件侦听器可以很好地处理 index.html 中列出的第一种形式。但它在第二种形式上根本不起作用。

每个表格都有一个 class 的“.mileage-form”。我知道您不能使用具有相同 ID 的单独 HTML 元素，但我认为 classes 没问题。我知道我可以通过在单击正确的表单按钮时使用 JavaScript 呈现 HTML 来解决此问题，而不是仅仅取消隐藏 html，但我试图了解为什么我试了没用。

index.html 看起来如下：

<!----------------------------- ITINERANT TRAVEL ----------------------------->
    <section id="itinerant" class="d-none">
      <form class="mileage-form">
        <div class="form-group form-row justify-content-center" id="row-1">
             <div class="col-sm-2 col-md-1">
               <label for="date-1">Date</label>
               <input type="date" id="date-1" class="form-control">
             </div>
             <div class="col-sm-3 col-md-3">
               <label for="origin-1">Origin Address</label>
               <input type="text" class="form-control" id="origin-1" placeholder="Street Address, City, State, Zip">
             </div>
             <div class="col-sm-3 col-md-3">
               <label for="destination-1">Destination Address</label>
               <input type="text" class="form-control" id="destination-1" placeholder="Street Address, City, State, Zip">
             </div>
             <div class="col-sm-2 col-md-1">
               <label for="personal-1">Personal Miles</label>
               <input type="text" class="form-control" id="personal-1" placeholder="0">
             </div>
             <div class="col-sm-2 col-md-1">
               <label for="calculated-1">Calculated Miles</label>
               <input type="text" class="form-control" id="calculated-1" placeholder="0" value="" disabled>
             </div>
          </div>
      </form>
      <div class="form-group form-row justify-content-center">
        <a href='#'><i class="fa fa-plus add-row" style="color: blue;"></i></a>
        <a href='#'><i class="fa fa-minus delete-row" style="color: red;"></i></a>
      </div>
      <div class="form-group form-row justify-content-center">
        <button type="button" class="btn btn-outline-success" id="calculate-mileage">Calculate Mileage</button>
        <button type="button" class="btn btn-outline-danger" id="clear-all">Clear All</button>
      </div>
    </section>

<!-------------------- Single Day Travel ----------------------->
    <section id="single-day" class="d-none">
      <form class="mileage-form">
        <div class="form-group form-row justify-content-center" id="row-101">
          <div class="col-sm-2 col-md-1">
            <label for="date-101">Date</label>
            <input type="date" id="date-101" class="form-control">
          </div>
          <div class="col-sm-3 col-md-3">
            <label for="origin-101">Origin Address</label>
            <input type="text" class="form-control" id="origin-101" placeholder="Street Address, City, State, Zip">
          </div>
          <div class="col-sm-3 col-md-3">
            <label for="destination-101">Destination Address</label>
            <input type="text" class="form-control" id="destination-101" placeholder="Street Address, City, State, Zip">
          </div>
          <div class="col-sm-2 col-md-1">
            <label for="personal-101">Personal Miles</label>
            <input type="text" class="form-control" id="personal-101" placeholder="0">
          </div>
          <div class="col-sm-2 col-md-1">
            <label for="calculated-101">Calculated Miles</label>
            <input type="text" class="form-control" id="calculated-101" placeholder="0" value="" disabled>
          </div>
        </div>
    </form>
      <div class="form-group form-row justify-content-center">
        <a href='#'><i class="fa fa-plus add-row" style="color: blue;"></i></a>
        <a href='#'><i class="fa fa-minus delete-row" style="color: red;"></i></a>
      </div>
</section>

我的事件监听器是这样的：

document.querySelector('.add-row').addEventListener('click', mileage.addRow);
document.querySelector('.delete-row').addEventListener('click', mileage.deleteRow);

添加和删除行的函数在 Mileage Class 中，但我认为那里没有问题，因为它们在 "Itinerant" 部分中可以正常运行。如果我将 "Itinerant" 部分注释掉，它们可以与 "Single Day" 部分一起正常工作。但就像我说的，如果两个部分都没有注释，只是隐藏起来，它们只适用于 Itinerant 部分。不过，如果您想查看该代码，我将其全部放在 github 上，它们将在 mileage.js 文件中。

对于我做错的任何解释，我将不胜感激！

Answer 1

使用

   querySelectorAll(".add-row").forEach(function(item){ item.addEventListener .. etc }):

定位所有元素

JavaScript 事件侦听器与隐藏的 DOM 元素交互

JavaScript Event Listeners interacting with hidden DOM Elements

javascript

dom

event-listener

bootstrap-4