在rails中nested_form中的Onchange事件5

Question

我在我的rails应用程序中使用nested_form。我需要添加onclick事件，它添加前两个字段并将总和呈现在第三个字段中。该脚本应该在所有嵌套字段中运行。我从宝石文档中尝试了以下代码。日期选择工作正常。但不知道如何修改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)); 
    }); 
})