레일 5에서 nested_form 내부의 변경 이벤트

Question

내 레일 응용 프로그램에 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)); 
    }); 
})