Rails 5中nested_form內部的Onchange事件

Question

我在Rails應用程序中使用nested_form 。 我需要添加onclick事件，該事件將前兩個字段相加並在第三個字段中呈現總和。 該腳本應在所有嵌套字段中運行。 我嘗試了gem文檔中的以下代碼。 日期選擇器工作正常。 但是不確定如何為onchange事件計算修改它。

$(document).on('nested:fieldAdded', function(event){
   var field = event.field; 
   var dateField = field.find('.date');
   dateField.datepicker();
 })

我的表格

<%= nested_form_for(unplanned_receipt, validate: true, html: {multipart:true}) do |f| %>
  <div class="row">
    <div class="col-md-6 form-group">
      <%= f.label :date, class: "col-md-4" %>
      <%= f.text_field :date, class: "col-md-8 form-control datepicker" %>
    </div>
    <div class="col-md-6 form-group">
      <%= f.label :upr_no, 'UPR No', class: "col-md-4" %>
      <%= f.text_field :upr_no, class: "col-md-8 form-control" %>
    </div>
    <div class="col-md-6 form-group">
      <%= f.label :uom, 'UOM', class: "col-md-4" %>
      <%= f.select :uom, UnplannedReceipt.uoms.keys.map { |e| [e.humanize, e]  }, {:required=>true}, class: "col-md-8 form-control e2" %>
    </div>
    <div class="col-md-6 form-group">
      <%= f.label :receipt_type, class: "col-md-4" %>
      <%= f.select :receipt_type, UnplannedReceipt.receipt_types.keys.map { |e| [e.humanize, e] }, {:required => true}, class: "col-md-8 form-control e2" %>
    </div>
  </div>

  <br>

  <div class="col-md-12">
    <table class="table table-bordered" id="tasks">
      <thead>
        <tr>
          <th>Material Name</th>
          <th>Receipt Qty</th>      
          <th>Inventory Qty</th>
          <th>Final Qty</th>
          <th>Delete</th>
        </tr>
      </thead>

      <tbody>
        <%= f.fields_for :unplanned_bulk_materials, validate: true,:wrapper => false do |e| %>
          <tr class="fields">
            <td><%= e.text_field :material_name, :required => true, class: "form-control" %></td>
            <td><%= e.text_field :receipt_qty, :required => true, class: "form-control r_qty" %></td>
            <td><%= e.text_field :inventory_qty, :required => true, class: "form-control i_qty" %></td>
            <td><%= e.text_field :final_qty, :required => true, class: "form-control f_qty" %></td>
            <td><%= e.link_to_remove do%><i class="fa fa-times" style="color:red"></i><%end%></td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <p align="center">
      <%= f.link_to_add :unplanned_bulk_materials, :data => { :target => "#tasks" }, class:"btn btn-sm btn-success" do%><i class="fa fa-plus">Add More</i><%end%>
    </p>
  </div>
  <div class="actions">
    <% if params[:id].nil? %>
      <%= f.submit 'Save', :class=>"btn btn-info" %>
    <% else %>
      <%= f.submit 'Update', :class=>"btn btn-warning" %>
    <% end %>
  </div>

<% end %>
<script type="text/javascript">
  $(".i_qty").on("blur", function() {
    var amt=parseFloat($(".r_qty").val())+parseFloat($(".i_qty").val());
    $('.f_qty').val(Math.round(amt));
  });
</script>

我希望以上腳本在所有嵌套字段中運行。 有人建議。 提前致謝。

Answer 1

您嘗試這樣嗎？：

$(document).on('nested:fieldAdded', function(event){
    var field = event.field;
    var RField = field.find('.r_qty');
    var IField = field.find('.i_qty');
    var FField = field.find('.f_qty');

    $(".i_qty , .r_qty").change( function() {
        var amt = parseFloat( RField.val() ) + parseFloat( IField.val() );
        FField.val(Math.round(amt));
    });
})