Javascript計算がレールのネストされたフォーム内でトリガーされない

Question

私のレールアプリケーションでnested_formを使用しています。入れ子になったフォームの中にonchangeイベントを追加する必要があります。新しい行が追加され、テキストフィールドの値がquantityに入力されるたびに、値は前に追加された行のフィールドquantityで追加されます。追加された値はtotalのテキストフィールドに表示されます。目的は、quantityの合計を見つけてtotalフィールドに表示することです。このスクリプトは、ネストされたフォームで追加されたすべての新しい行に対して機能するはずです。誰か助けてください。前もって感謝します。

マイGemfile

gem 'rails', '~> 5.0.2' 
gem 'pg', '~> 0.18' 
gem 'puma', '~> 3.0' 
gem "responders" 
gem "active_model_serializers", github: "rails-api/active_model_serializers" 
gem 'date_validator' 
gem 'axlsx_rails' 
gem 'carrierwave', '~> 1.0' 
gem 'jquery-ui-rails' 
gem "select2-rails" 
gem 'bootstrap', '~> 4.0.0.alpha6' 
gem 'font-awesome-sass', '~> 4.7.0' 
gem 'will_paginate', '3.1.5' 
gem "nested_form" 
gem 'yaml_db' 
gem 'sass-rails', '~> 5.0' 
gem 'uglifier', '>= 1.3.0' 
gem 'coffee-rails', '~> 4.2' 
gem 'jquery-rails' 
gem 'turbolinks', '~> 5' 
gem 'jbuilder', '~> 2.5' 

マイドキュメントによるとapplication.js

//= require jquery 
//= require jquery_ujs 
//= require select2 
//= require jquery_nested_form 
//= require turbolinks 
//= require jquery-ui 
//= require bootstrap 
//= app 
//= vendor 
//= require_tree . 

そして、私の_form.html.erb

<%= nested_form_for(normalmenu_site) do |f| %> 
    <%= f.text_field :total, readonly: true, class: "tot" %> 
    <table class="table table-container" id="tasks"> 
     <thead> 
      <th>Quantity/Per Head</th>  
      <th>Action</th>  
     </thead> 
     <tbody> 
      <%= f.fields_for :normal_menus ,wrapper:false do |ff| %> 
      <tr class="fields">    
      <td><%= ff.text_field :quantity, class: "dt" %></td>  
      <td><%= ff.link_to_remove "".html_safe,:class=>"fa fa-trash-o "%></td>  
      </tr>  
      <%end%> 
      <%= f.link_to_add "".html_safe, :normal_menus,:class=>"fa fa-plus ", :data => { :target => "#tasks" } %> 
     </tbody> 
     </table> 
    <% end %> 

<script type="text/javascript"> 
    $(document).on('nested:fieldAdded', function(event){ 
    var field = event.field; 
    var total = ($(".tot").val()); 
    var roleField = field.find('.dt'); 
    $(".dt").keyup(function() { 
     alert(roleField.val()); 
     var total += roleField.val(); 
    }); 
    }) 
</script> 

Answer 1

here

この宝石だけRailsの中で動作するプラグイン ためrails2ブランチを参照してください。3.レールで動作します

2.

nested_formのみrails 3で動作しますが、あなたはrails 5

を使用しています