我正在使用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;' %> <%= 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文件显示第一次在每个'amount'字段中计算的值
似乎有什么问题?每次调用部分计算时,我能做些什么才能进行正确的计算?迫切需要帮助。提前致谢
答案 0 :(得分:0)
第二次呈现“添加产品”部分后,页面上的某些元素会显示重复的id
值price
,qty
,amount
) 。这是无效的HTML,jQuery无法告诉您将keyup
绑定到哪个。
尝试重写部分和jQuery以避免此问题。要么生成正确的唯一ID,要么将keyup
挂钩到不同的属性(可能是一个类?)。如果你选择后一种方法,你也可以考虑将jQuery作为live
调用放入页面,而不是为每个新产品添加新的keyup
绑定。