Javascript rails 5中嵌套的_表单中的Onchange事件

我正在rails应用程序中使用。我需要添加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>

true}，类：“col-md-8表单控件e2”%>
true}，类：“col-md-8表单控件e2”%>


材料名称
入库数量
库存数量
最终数量
删除
假do | e |%>
true，类：“窗体控件”%>
true，类：“表单控件r\u数量”%>
正确，类：“表单控制i_数量”%>
true，类：“表单控制f_数量”%>

{:target=>“#tasks”}，类：“btn btn sm btn success”do%>添加更多

“btn btn信息”%>
“btn btn警告”%>
美元（“.i_数量”）。关于（“模糊”，函数（）{
var amt=parseFloat（$（“.r_数量”）.val（））+parseFloat（$（.i_数量”）.val（））；
$（'f_数量'）.val（数学整数（金额））；
});

---

我希望上面的脚本在所有嵌套字段中运行。请推荐一个人。提前谢谢。

你可以试试这样的吗

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

---

你尝尝这样的吗

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

---

它适用于第一行，并为所有其他行生成相同的值@在ye.check edit中，其思想是为第一行工作的每个事件（每个add事件）获取相应的输入，并为所有其他行生成相同的值@在ye.check edit中，想法是为每个事件（每个add事件）获取相应的输入