与隐藏的DOM元素进行交互的JavaScript事件监听器

Question

我正在为工作创建旅行报销表。我们有4种不同的旅行类型，所以我的计划是为每种类型都有一个按钮，当您单击按钮时，正确的表格将显示在其自己的<section>元素中。我正在使用Bootstrap 4，并且index.html文件中的每个表单都带有“ d-none”类，因此在加载时均不显示任何表单。

在表单的里程部分，我有一个Font-Awesome的加号和减号，用于添加另一行或删除一行。我遇到的问题是我的事件侦听器可以与index.html中列出的第一个表单一起正常工作。但是在第二种形式上根本不起作用。

每个表单都有一个“ .mileage-form”类。我知道您不能使用具有相同ID的单独HTML元素，但是我认为类还可以。我知道我可以通过单击正确的表单按钮时用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类中，但是我认为那里没有问题，因为它们在“巡回”部分中可以正常运行。如果我将“巡回”部分注释掉，则它们与“单日”部分可以正常工作。但是就像我说的那样，如果两个部分都未注释且只是隐藏，则它们仅与巡回部分一起使用。如果您想查看该代码，请在github上找到所有代码，它们将位于Mileage.js文件中。

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

Answer 1

使用

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

以所有元素为目标