Javascript 如何在ajax更新div中进行计算？

我使用javascript编写了一个应用程序，将数量与价格相乘，但只处理第一行

这是控制器：

def index
   @products= CustomerProduct.all
end 

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

这是索引视图：（显示所有产品和将更新的div）

以下是部分视图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 %>

jQuery（#quantity”）.live（“change”，function（）{
quantity=parseFloat（jQuery（this.val（））；
import=parseInt（jQuery（#import”）.val（）；
总计2=数量*进口；
jQuery（“#total2”）.val（total2.toFixed（2））；
jQuery（“#total2”）.autoNumericSet（total2.toFixed（2））；
});
jQuery（'input#total2'）.autoNumeric（）；

“10”，如果@selected\u product%>
“40”如果@selected_product%>
如果@selected\u product%>
如果@selected\u product%>
“12”，如果@selected\u product%>

只有第一行可以正常工作吗

但在添加更多行后不起作用

javascript似乎只处理第一行

---

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

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

要解决此问题，请为每行生成唯一的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));
});

jQuery（.quantity”）.live（“更改”，函数（）{
//查找数量字段的父元素
var row=jQuery（this.parent（）；
//从行中的字段中检索值
quantity=parseFloat（jQuery（this.val（））；
import=parseInt（row.find（“.import”）.val（）；
//计算
总计2=数量*进口；
//将该值设置为第行的total2字段
行.find（“.total2”）.val（total2.toFixed（2））；
行查找（“.total2”）.autoNumericSet（total2.toFixed（2））；
});

是的，您必须进行一些更改。具体是什么，这取决于你选择哪种方法。如果你使用CSS类，你不必不断地在脚本中添加新的ID。我从来没有使用过eRuby，所以我不能帮你完成这部分，但我在我的答案中添加了一些JavaScript示例代码。你是否遇到了某种错误？您使用的是哪个版本的jQuery？听起来很奇怪。我在JSFIDLE中测试了该代码，因此它应该可以工作。试着添加一些日志，看看你是否能找出问题所在。是的，我理解你想要实现的目标。只要RoR逻辑有效，我给您的代码就应该做到这一点。

<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 %>

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));
});