单击带有茧的销毁后，如何重新计算发票而没有销毁记录

Question

上下文我正在使用茧形宝石为invoice_rows创建嵌套的invoice。一切都会按预期进行（删除，创建嵌套记录等）。

在invoice form中，我还使用Javascript跟踪最实际的total_invoice amount。使用我的Javascript代码，当total_invoice amount更改或使用茧创建新的price, quantity or VAT时，我能够重新计算invoice_row。

问题当我删除嵌套记录时，会发生此问题。根据文档，我尝试使用cocoon:after-remove触发事件，但是删除视图中的invoice_row后没有触发任何事件。

其他尝试我还尝试了删除按钮上的click事件（另请参见脚本中注释掉的代码）。不幸的是，删除的嵌套记录的类仍然被我的Javascript代码接收，因此被输入到total_invoice amount的计算中。 （因此，我猜是cocoon:after-remove命令）

代码

invoice_form.html.erb

<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 id="check">
    <%= 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>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-1"><b>Subtotal</b></div>
    <div class="col col-sm-2"><input type="text" class="field nettotal form-control"></div>
  </div>
  <br>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-1">VAT</div>
    <div class="col col-sm-2"><input type="text" class="field vat-total form-control"></div>
  </div>
  <br>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-1"><b>Total</b></div>
    <div class="col col-sm-2"><input type="text" class="field gross-total form-control"></div>
  </div>

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

 // $(document).on('click', '.delete-vat', function() { /* recalculate */
$(document).ready(function(){
    $('#check')
  .on('cocoon:after-remove', function() { /* recalculate */
    var result = 0
    var vat_result = 0
    var price = [];
    var quantity = [];
    var vat = [];
    console.log('yes')

    $('.price').each(function(i, obj) {
      price.push((Math.round(+obj.value*100)/100).toFixed(2));
    });

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

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

    var result = 0
    price.forEach((o,i)=>{
    $(".gross-total").eq( i ).val(o*quantity[i]);

    result += o*quantity[i];
    // console.log(result)

    $(".gross-total").val(result);
    });

    var vat_result = 0
    price.forEach((o,i)=>{
    $(".vat-total").eq( i ).val(o*vat[i]);

    vat_result += o*vat[i]/100 * quantity[i];

    $(".vat-total").val(vat_result);
    });
    var sub = result - vat_result
     $(".nettotal").val(sub);
  })

_ invoice_row_fields.html.erb

<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 vat"} %></div>
      <div class="col col-sm-2"><input type="text" class="field subtotal form-control"></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>

上下文，我使用茧形宝石来创建嵌套的invoice_rows用于发票。一切都会按预期进行（删除，创建嵌套记录等）。我还以发票形式跟踪...

Answer 1

使用茧移除物品时，通常不会真正