如何监听某个class的字段all/any的变化事件？

Question

我正在使用 cocoon gem 将 invoice_rows 的嵌套字段添加到 invoice。对于每个 invoice_row，我添加了该行总数的动态计算 (quantity * price)。这一切都非常有效，所以当我调整 price 或 quantity 时，row_total 也会发生变化。

问题现在我想对总发票价格做同样的事情。这意味着对于每个 invoice_row 我需要乘以 quantity * price 并为所有行添加它们。这部分用于加载 DOM，但我不知道如何在任何字段（quantity 或 price）更改时触发重新计算。

=>我添加了 .field class 来识别它们，但由于它们不是唯一的，我不知道如何听取变化他们中的任何一个。

代码

invoice_form

<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>

脚本invoice_form（用于计算总发票价格）

<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>

_invoice_row_fields

<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>

Answer 1

$(document).on('change', '.field', function() { /* recalculate */ });

如何监听某个class的字段all/any的变化事件？

How to listen to a change event in all/any of the fields of a certain class?

javascript

jquery

cocoon-gem