如何在ajax update div中进行计算？

Question

我使用javascript将数量与价格相乘,但仅与第一行一起使用.

这是控制器:

def index
   @products= CustomerProduct.all
end 

def selected_product
   @selected_product = CustomerProduct.find(params[:id])
end

这是索引视图:(显示所有产品和将更新的div)

<% @products.each do |product| %>
 <p> 
    <%= product.product_name %>
    <%= link_to_remote image_tag("image.png"),:url=>{:controller=>"customer_product",:action=>"selected_product",:id=>product.id } %>
 </p>
<% end %>

<div id="list_products">
   ## Here is the div that will update after select a product.
</div> 

这是替换div的ajax更新:"selected_product.rjs"

 page.insert_html(:bottom,"list_products", :partial=>"customer_product/partials/add_product")

以下是部分视图add_product.erb,显示所选信息

<script type="text/javascript">
jQuery("#quantity").live("change", function(){
    quantity = parseFloat(jQuery(this).val() );
    importe = parseInt(jQuery("#importe").val());

    total2 = quantity*importe;   
    jQuery("#total2").val(total2.toFixed(2));
    jQuery("#total2").autoNumericSet(total2.toFixed(2));

  });
jQuery('input#total2').autoNumeric();
</script>

<% @products.each do |product| %>
 <p>
    <%= text_field_tag 'code',@selected_product.product_code,:maxlength=>"10",:size=>"10" if @selected_product %>
    <%= text_field_tag 'name',@selected_product.product_name,:size=>"40" if @selected_product %></td>
    <%= text_field_tag 'quantity',@net_insurance.to_i ,:value=>"1" ,:maxlength=>"9",:size=>"8" if @selected_product%>
    <%= text_field_tag 'importe',@selected_product.product_price ,:readonly=>true,:size=>"10" if @selected_product %>
    <%= text_field_tag 'total2',@total2.to_i,:maxlength=>"12",:size=>"12" if @selected_product %>
 </p>
<% end %>

只在第一行工作正常

但是在添加更多行后无法正常工作

似乎javascript只与第一行一起使用.

请有人帮我解决这个问题吗？

Answer 1

这里的问题是您使用ID访问字段.每个产品行上的 ID都相同.对于有效的HTML,每个元素的ID必须是唯一的,这就是你的jQuery选择器只占用第一行的原因.

要解决此问题,请为每行生成唯一ID,或使用ID以外的其他ID.例如,类.

以下是用于类的更改处理程序的修改版本:

jQuery(".quantity").live("change", function() {

    // find the parent <p> element of the quantity field
    var row = jQuery(this).parent();

    // retrieve the values from the fields in row
    quantity = parseFloat(jQuery(this).val());
    importe = parseInt(row.find(".importe").val());

    // do the calculation
    total2 = quantity * importe;

    // set the value to to the total2 field in row
    row.find(".total2").val(total2.toFixed(2));
    row.find(".total2").autoNumericSet(total2.toFixed(2));
});