動態生成字段的計算

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事件並設置總費用的值來實現此key_up 。 我可以舉一個例子：

您可以相應地對其進行修改

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

Answer 2

我最終能夠做到這一點的方法是將一個類添加到生成代碼的動態字段中。 因此，盡管該字段的ID發生了變化，但我仍然擁有一個保持不變的類。

然后，我可以在課程上進行更改，並獲取所需的詳細信息。

下面的示例代碼。

$(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));
});