2

我正在尝试构建一个动态网格样式计算器，以便用户可以建立某些东西的成本，他们可以根据需要添加尽可能多的行来捕获所有组件详细信息。我现在需要做的就是让我的 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单元格时 have usedtotal，这没什么！将其更改为 linetotal 变量已修复它，现在所有单元格都可以正确计算。

4

1 回答 1

5

您正在使用 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/

于 2013-04-02T21:28:34.073 回答