Javascript 计算未在 Rails 嵌套表单内触发

Question

我在 Rails 应用程序中使用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

This gem only works with Rails 3. See the rails2 branch for a plugin to work in Rails 2.

nested_form 仅适用于 rails 3，但您正在使用 rails 5