Question

我正在尝试构建一个动态网格样式计算器，以便用户可以增加某些内容的成本，他们可以根据需要添加尽可能多的行来捕获所有组件详细信息。我现在需要做的是使我的jQuery动态化，因此它为每个添加的行计算每个Total和Line Total。因为我现在有了代码，它只适用于计算器的第一行

Calculator

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

修改
我有二手＆amp; amp;成本总额和浪费＆amp;总成本。但似乎无法让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/

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

1 个答案: