javascript_include_tag 在 Ruby on Rails 的部分内部无法正常工作

Question

我正在使用 simple_nested_form，我的客户账单表格中有这个

<%= simple_nested_form_for @customer_bill do |f| %>
 <%= f.error_messages %>

 <%= f.label :employee_id %>
    <%= f.collection_select :employee_id, Employee.all,:id,:name, {:prompt => "Select Employee"}, :style => 'width:205px;' %><br />

            <%= f.label :date %>
            <%= f.datepicker :date, :dateFormat => 'dd MM, yy',  :showOn => "both", :buttonImage => "../assets/calendar.gif", :buttonImageOnly => true, :changeMonth => true, :changeYear => true, :placeholder => "Click on the Calender" %><br/>          

 <p><%= f.link_to_add "Add Product", :customer_bill_line_items %> </p>
  <p><%= f.submit %></p>
<% end %>

点击“添加产品”后，会呈现以下部分

 <%= javascript_include_tag 'calculations' %>
     <hr/> 
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <%= f.hidden_field :customer_bill_id %>

    <%= f.label :product_id %>
    <%= f.collection_select :product_id,Product.all,:id,:title, :prompt => "Select a Product", :style => 'width:150px;' %>&nbsp;&nbsp;&nbsp;<%= f.link_to_remove "Remove Product"%>
    <br/>

     <p class="fields">
<%= f.input :price, :class =>"price" %>
<br/>
<%= f.input :quantity, :class =>"qty" %><br/>

<%= f.input :amount, :class =>"amount"%><br/>
</p>

我的 Calculations.js 中有这个

jQuery(document).ready(function(){
jQuery(".price, .qty").keyup(function() {
        var p = jQuery(".price").val();
        var q = jQuery(".qty").val();
        jQuery(".amount").val(q * p);
    });
});

​

现在问题是第一次我点击“添加产品”并输入“价格”和“数量”，金额在 js 文件中计算并显示在“金额”字段中，然后我点击添加产品第二次，第一次的计算被渲染，似乎js文件在每个“金额”字段中显示第一次计算的值

似乎是什么问题？每次我调用部分时，我该怎么做才能进行正确的计算？急需帮助。提前致谢

Answer 1

第二次呈现“添加产品”部分后，页面上的某些元素具有重复的 id 值（price、qty、amount）。这是无效的 HTML，jQuery 将无法判断您要将 keyup 绑定到哪些。

尝试重写你的 partial 和 jQuery 来避免这个问题。要么生成正确的唯一 ID，要么将您的 keyup 挂钩到不同的属性（可能是一个类？）。如果您选择后者，您还可以考虑将 jQuery 作为 live 调用放入页面，而不是为每个新产品添加新的 keyup 绑定。