Javascript 如何在某个类的所有/任何字段中侦听更改事件？

我正在使用cocoon gem将

invoice\u行的嵌套字段添加到
invoice
。对于每一行
发票
，我添加了该行总额的动态计算（
数量
*
价格
）。这一切都很有魅力，所以当我调整
价格
或
数量
时，行总数也会发生变化

问题
现在我想对发票总价格做同样的处理。这意味着，对于每一行
发票
，我需要将
数量
*
价格
相乘，并将它们添加到所有行中。这部分用于加载DOM，但我不知道当任何字段（
quantity
或
price
）更改时如何触发重新计算

=>我向它们添加了
.field
类来识别它们，但由于它们不是唯一的，我不知道如何侦听它们中任何一个的更改。

代码

<script>
  // $('.row').keyup(function() {
      // var price = [];
      // var quantity = [];
      var result = 0

      Array.from(document.getElementsByClassName("test")).forEach(
          function(element, index, array) {
            console.log(element)
            var price = [];
            var quantity = [];
              // test
            $('.price').each(function(i, obj) {
              price.push((Math.round(+obj.value*100)/100).toFixed(2));
              console.log(price)
            });

            $('.quantity').each(function(i, obj) {
              quantity.push(+obj.value);
            });
            });

            price.forEach((o,i)=>{
            $(".gross-total").eq( i ).val(o*quantity[i]);
            result += o*quantity[i];
            // console.log(result)
            });

            $(".gross-total").val(result);
// });
</script>

发票单

<div class="form-container col col-sm-6 col-lg-12">
  <%= simple_form_for [@hotel, @invoice] do |f|%>

    <h5><strong><u><%= t('.invoice') %> </u></strong></h5>
    <!-- headers -->
    <div class="row">
      <div class="col col-sm-3"><b>description</b></div>
      <div class="col col-sm-2"><b>unit price</b></div>
      <div class="col col-sm-2"><b>amount</b></div>
      <div class="col col-sm-2"><b>VAT (%)</b></div>
      <div class="col col-sm-2"><b>Total</b></div>
    </div>
    <div class="border-invoice"></div>
    <!-- headers -->
  <%= f.simple_fields_for :invoice_rows do |invoice_row| %>
  <div class="reservation-details">
    <%= render 'invoice_row_fields', f: invoice_row %>
  </div>
  <% end %>

  <div class="col col-sm-2">Total<input type="text" class="field gross-total form-control"></div>


  <div>
    <%= link_to_add_association f, :invoice_rows do %>
    <div class="option-add-option-price">
      <div class="prices-border">
        <i class="fas fa-plus"></i> Add another invoice line
      </div>
    </div>
    <% end %>
  </div>

  <div class="border-invoice"></div>
  <p><%= Money.from_amount(@invoice.total, @hotel.currency).format %></p>

    <div class="row">
      <div class="col col-sm-6"> <%= f.button :submit, t(".invoice_button"), class: "create-reservation-btn"%>
      </div>
    </div>
    <% end %>
    <% end %>
  </div>
</div>



描述
单价
数量
增值税（%）
全部的
全部的
添加另一个发票行


编写发票表单脚本（，用于计算发票总价）


//$（'.row'）.keyup（函数（）{
//var价格=[]；
//var数量=[]；
var结果=0
from（document.getElementsByClassName（“test”））.forEach(
函数（元素、索引、数组）{
console.log（元素）
var价格=[]；
var数量=[]；
//试验
$（'.price'）。每个（函数（i，obj）{
价格推送（（数学舍入（+obj.value*100）/100）.toFixed（2））；
控制台日志（价格）
});
$（'.quantity'）。每个（函数（i，obj）{
推送量（+目标值）；
});
});
每小时价格（（o，i）=>{
$（“.gross total”）.eq（i）.val（o*数量[i]）；
结果+=o*数量[i]；
//console.log（结果）
});
美元（“.gross total”）.val（结果）；
// });

_发票\行\字段

<div class="nested-fields">
    <div class="row test">
      <div class="col col-sm-3"><%= f.input :description, placeholder: "Product or service description", label: false %></div>
      <div class="col col-sm-2"><%= f.input :price, placeholder: "Price incl. VAT", label: false, input_html:{class: "field price"}  %></div>
      <div class="col col-sm-2 "><%= f.input :amount, label: false, input_html:{class: "field quantity"} %></div>
      <div class="col col-sm-2"><%= f.collection_select :vat_percentage, @hotel.vat_groups, :vat_percentage, :vat_percentage, {prompt: "Select a VAT"}, {class: "form-control"} %></div>
      <div class="col col-sm-2"><input type="text" class="field subtotal form-control"></div>

    <!-- </div> -->

    <div class="col col-sm-1">
      <%= link_to_remove_association f do %>
      <i class="fas fa-trash delete-vat"></i>
      <% end %>
    </div>
    </div>
</div>

不客气。这里有一些注释。为什么我使用$（文档）？。如果删除/重新创建特定元素，则事件侦听器将丢失，因此必须附加到不可变的父级，并且除非删除并重新创建整个html元素，否则顶级父级侦听器将始终工作。为什么。换衣服而不是换衣服。on可以附加到动态创建的元素，而无需调用事件侦听器创建，即使在分配侦听器时元素不存在。基本上，on将附加到您将来创建的元素。
$(document).on('change', '.field', function() { /* recalculate */ });