每个动态行的jquery总计和小计仅计算第一行

Question

我正在尝试构建一个动态网格样式计算器,以便用户可以增加某些成本,他们可以根据需要添加尽可能多的行来捕获所有组件细节.我现在需要做的是让我的jQuery的动态了,所以它计算每个Total以及Line Total对于每个已添加的每一行.因为我现在有代码,它只适用于计算器的第一行

$(document).ready(function () {
    $('.used-amount input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
        $('.used-total').text(usedtotal);
    });

    $('.used-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.used-amount input[type="text"]').val();
        $('.used-total').text(usedtotal);
    });

    $('.wastage-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.wastage-amount input[type="text"]').val();
        $('.wastage-total').text(usedtotal);
    });

    $('.wastage-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.wastage-amount input[type="text"]').val();
        $('.wastage-total').text(usedtotal);
    });

    $('.calculator input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var linetotal = 
            ($('.used-amount input[type="text"]').val()
          *  $('.used-cost input[type="text"]').val())
          + ($('.wastage-amount input[type="text"]').val()
          *  $('.wastage-cost input[type="text"]').val())
        $('.line-total').text(linetotal);
    });
});

每行都是一个剃刀局部视图:

@model TheWorkshop.Web.Models.Edit.CalculatorViewModel

<tr class="calculator-detail">
  <td class="component-type">@Html.EnumDropDownListify("ComponentType", @Model.ComponentType)</td>
  <td class="component">@Html.DropDownListFor(model => model.SelectedComponentId, Model.ComponentSelectList, "Select...")</td>
  <td class="used-amount">@Html.EditorFor(model => model.UsedAmount)</td>
  <td class="used-cost">@Html.EditorFor(model => model.UsedCost)</td>
  <td class="used-total"></td>
  <td class="wastage-amount">@Html.EditorFor(model => model.WastageAmount)</td>
  <td class="wastage-cost">@Html.EditorFor(model => model.WastageCost)</td>
  <td class="wastage-total"></td>
  <td class="line-total"></td>
</tr>

单击按钮时我正在添加

$(document).ready(function ($) {
    $("button").click(function () {
        $.get('@Url.Action("AddCalculatorRow", "Workshop", 
                new { id = Model.Id } )', function (data) {
            $(data).hide().appendTo('.calculator tbody').fadeIn(2000);
        });
    });
});

和控制器

public ActionResult AddCalculatorRow()
{
    var components = Session.QueryOver<Component>()
                            .OrderBy(c => c.Name).Asc.List<Component>();
    var modelView = new CalculatorViewModel() { Components = components }; 

    return PartialView("_CalculatorRow", modelView);
}

编辑
我已经使用了二手和成本总计以及浪费和成本总计.但似乎无法让LineTotal工作并跟随@ JeffB的评论它现在看起来像这样:

$(document)
  .on("propertychange, change, keyup, paste, input",
      '.calculator input[type="text"]', function () {
         var linetotal = 
           ($(this).parent().siblings('.used-amount').find('input').val() *    
            $(this).parent().siblings('.used-cost').find('input').val())
         + ($(this).parent().siblings('.wastage-amount').find('input').val() * 
            $(this).parent().siblings('.wastage-cost').find('input').val());
         $(this).parent().siblings('.line-total').text(usedtotal);
      });

编辑2
这将教我复制和粘贴...
我上面的代码中的错误是我已经将所有4个单元格的总数分配给linetotal变量,但是当更新line-total单元格时usedtotal,这是什么都没有!将其更改为linetotal变量会修复它,现在所有单元格都能正确计算.

Answer 1

您正在使用on()的非委托版本,该版本未绑定到调用后添加的UI元素.尝试改变

$('.used-amount input[type="text"]')
       .on("propertychange, change, keyup, paste, input", function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});

至

$(document)
       .on("propertychange, change, keyup, paste, input", 
           '.used-amount input[type="text"]', function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});

如需更多信息,请参见直接和委托的事件中

http://api.jquery.com/on/