レール内のnested_form内のOnchangeイベント5

Question

私のレールアプリケーションでnested_formを使用しています。最初の2つのフィールドを追加し、3番目のフィールドに合計を表示するonclickイベントを追加する必要があります。このスクリプトは、すべてのネストされたフィールドで実行する必要があります。私はgemのドキュメントから次のコードを試しました。日付ピッカーは正常に動作します。しかし、これを変更イベント計算のためにどのように修正するかはわかりません。

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