计算动态生成的字段

Question

我在表单中有一些动态生成的字段。见下面的代码。

<% count = 0 %>
<% @details.each do |detail| %>
<div class="row">
    <div class="col l3">
        <div class="input-field string optional disabled bill_bill_details_item_name">
            <input class="string optional disabled" disabled="disabled" type="text" name="bill[bill_details_attributes][<%= count %>][item_name]" id="bill_bill_details_attributes_<%= count %>_item_name" value="<%= detail.item_name %>" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_name]" id="bill_bill_details_attributes_<%= count %>_item_name" value="<%= detail.item_name %>" />
        </div>
    </div>
    <div class="col l3">
        <div class="input-field decimal optional disabled bill_bill_details_quantity">
            <input class="numeric decimal optional disabled" disabled="disabled" type="number" step="any" name="bill[bill_details_attributes][<%= count %>][quantity]" id="bill_bill_details_attributes_<%= count %>_quantity" value="<%= detail.item_quantity %>" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][quantity]" id="bill_bill_details_attributes_<%= count %>_quantity" value="<%= detail.item_quantity %>" />
        </div>
    </div>
    <div class="col l3">
        <div class="input-field decimal optional bill_bill_details_cost">
            <input class="numeric decimal optional" type="number" step="any" name="bill[bill_details_attributes][<%= count %>][cost]" id="bill_bill_details_attributes_<%= count %>_cost" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_type]" id="bill_bill_details_attributes_<%= count %>_item_type" value="<%= detail.item_type %>" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_id]" id="bill_bill_details_attributes_<%= count %>_item_id" value="<%= detail.item_id %>" />
        </div>
    </div>
    <div class="col l3">
        <div class="input-field decimal optional disabled bill_bill_details_item_total">
            <input class="numeric decimal optional disabled" disabled="disabled" type="number" name="bill[bill_details_attributes][<%= count %>][item_total]" id="bill_bill_details_attributes_<%= count %>_item_total">
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_total]" id="bill_bill_details_attributes_<%= count %>_item_total" />
        </div>
    </div>
</div>
<% count += 1 %>
<% end %>

产生类似的东西：

我需要让用户输入每个项目的成本，然后自动计算最终列中的值。我通过在成本输入中添加一个类来尝试模糊，但它会导致问题，因为它在返回访问权限之前触发模糊事件几乎100次，

能够实现这一目标的最佳方法是什么？我希望使用CoffeeScript进行非侵入性的解决方案。

Answer 1

您可以通过在该字段上使用key_up jquery事件来实现此目的 并设定总成本的价值。 我可以给你举个例子： -

你可以相应地修改它

  $('#cost-field-id').on('keyup', function(e){
    var cost = parseFloat($(this).val());
    $('#total-calculation-field-id').val((cost).toFixed(2));
  });

Answer 2

我最终能够做到这一点的方法是在生成代码的动态字段中添加一个类。因此，虽然字段的id改变了，但我仍然会有一个保持不变的类。

然后我可以在班级上调用on change并获取所需的详细信息。

以下Eaxmple代码。

$(document).on('change', 'input.mycost', function() {
  var cost, id, quantity, quantity_id, total, total_id;

  // this will provide me with the count variable value
  // as i know it will always be in this position of the string.
  id = this.id.split('_')[4];

  // I can then use the same to get generate the id's of other tags.
  // and perform the calculations I need to make.
  total_id = '#bill_bill_details_attributes_' + id + '_item_total';
  quantity_id = '#bill_bill_details_attributes_' + id + '_quantity';
  quantity = parseFloat($(quantity_id).val());
  cost = parseFloat($(this).val());
  total = quantity * cost;
  return $(total_id).val(total.toFixed(2));
});