0

我正在使用nested_form 创建具有多个 invoice_line_items 的发票表单。然后我在用户输入他们的信息时使用 javascript 来计算总数。除了 fieldRemoved 侦听器事件没有触发重新计算外，一切正常。这是我的js：

function calculate_invoice() {
  $(".txtMult input").keyup(multInputs);

  function multInputs() {
    var mult = 0;
    // for each row:
    $("tr.txtMult").each(function () {
      // get the values from this row:
      var $quantity = $('.quantity', this).val();
      var $rate = $('.rate', this).val();
      var $total = ($quantity * 1) * ($rate * 1);
      // set total for the row
      $('.multTotal', this).text($total);
        mult += $total;
      });
    $("#grandTotal").text(mult);
  }
}

$(document).ready(function () {
  calculate_invoice();
});

$(document).on('nested:fieldAdded', function(event){
  calculate_invoice();
});

// not working
$(document).on('nested:fieldRemoved', function(event){
  calculate_invoice();
});

我放置了一个控制台输出以确保 js 函数正确触发并且确实如此。但是，页面不会重新计算。这是我的页面视图：

 %table.table#line_items_table
        %thead
          %td  
          %td Description
          %td Quantity
          %td Rate
          %td Total
        %tbody#line-items
          = f.fields_for :invoice_line_items, :wrapper => false do |line_item|
            %tr.txtMult.fields
              %td= line_item.link_to_remove "X"
              %td= line_item.text_field :description, :label => false
              %td= line_item.text_field :quantity, :class => "input-mini quantity", :label => false, :id => "quantity"
              %td= line_item.text_field :rate, :class => "input-mini rate", :label => false, :id => "rate"
              %td.multTotal 0
      %p#grandTotal.pull-right 0
      %p= f.link_to_add "Add", :invoice_line_items, :data => { :target => "#line-items" }, :id => "hello"
      .form-actions
        = f.submit "Preview Invoice", :class => "btn btn-primary pull-right"

为什么这不起作用？谢谢！

4

1 回答 1

1

这样做的原因是，当您使用nested_formgem 删除字段时，字段本身并没有被删除，只是被隐藏了。具体来说，它会添加style="display: none;"到.fields元素中，因此当您循环计算小计时，您需要排除这些元素。更改您的循环multInputs()以排除隐藏元素应该可以解决问题，例如使用：

$("tr.txtMult:visible").each(function () { ... })
// or
$("tr.txtMult").not("[style]").each(function () { ... })
于 2013-04-04T01:16:06.697 回答