计算动态添加的表单元素的总和 - calculating sums for dynamically added form elements

我有下面的表单，当用户单击"添加新"按钮时，每个.form-row都是使用jQuery动态添加的。

我的 html 表单（简体）

<div id="total_sum">
  <!-- here will show up total amount, which is sum of unit[] * price[] - discount[] of all below form-rows -->
</div>
<div id="total_discount">
  <!-- here will show up total discount amount, which is sum of discount[] of all below form-rows -->
</div>
<div id="total_net">
  <!-- here will show up net amount, which is total_sum - total_discount -->
</div>
<form id="form" method="POST" action="">
  <div class="form-row">
    <select name="item[]">
      <option value="item-id-1">Item 1</option>
      <option value="item-id-2">Item 2</option>
      <option value="item-id-3">Item 3</option>
    </select>
    <input type="number" class="unit" value="1" name="unit[]" />
    <input type="number" class="price" name="price[]" />
    <input type="number" class="discount" name="discount[]" />
    <input type="number" class=name="sum[]" />
  </div>
  <div class="form-row">
    <select name="item[]">
      <option value="item-id-1">Item 1</option>
      <option value="item-id-2">Item 2</option>
      <option value="item-id-3">Item 3</option>
    </select>
    <input type="number" class="unit" value="1" name="unit[]" />
    <input type="number" class="price" name="price[]" />
    <input type="number" class="discount" name="discount[]" />
    <input type="number" class="sum" name="sum[]" />
  </div>
  <!-- and users can dynamically add as many form-rows as they want -->
  <div class="form-row">
    <select name="item[]">
      <option value="item-id-1">Item 1</option>
      <option value="item-id-2">Item 2</option>
      <option value="item-id-3">Item 3</option>
    </select>
    <input type="number" class="unit" value="1" name="unit[]" />
    <input type="number" class="price" name="price[]" />
    <input type="number" class="discount" name="discount[]" />
    <input type="number" class="sum" name="sum[]" />
  </div>
</form>

我试图实现的是双重的：

计算每行的总和（.form-row）并显示每行的总和（在sum[]字段中）
计算所有行（所有.form-row）的所有总和和折扣的总和，并以#total_sum、#total_discount和#total_net显示它们。

我相信我需要一些东西来获取所有.form-row，每当形式发生变化时（或者每 1 秒，也许是每 1 秒？）就会触发，并循环它们以计算各自的总和，并在循环结束时计算总和和折扣。如果是PHP，我可以这样做，但是我对jQuery或Javascript很陌生，所以我不知道首先在哪里研究。

[添加]

我在上面的解释中没有提到的一件事是 unit[] 的默认值为 1，而 price[] 首先使用 AJAX 自动追加，然后用户可以更改该值。

我的 AJAX 在用户选择项目时自动检索价格。

<script>
jQuery(document).ready(function($) {
    /*  Get Item Price and Item Currency */
    $('#form').on('change', '.item_id', function(){
        var this$ = $(this);
        var $item_id    =  this$.val();
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        // call ajax for item price (returns 0 if item has no price)
        $.ajax({
            url: ajaxurl,
            data:' action=get_item_price_by_id&item_id='+$item_id,
            type:'GET',
            success:function(results) {
                this$.parent().parent().find('.price').empty();
                this$.parent().parent().find('.price').val(results);
            }
        });
    });
});
</script>

感谢Manish Jangir Blogadditic的建议，我有了以下代码：

<script>
jQuery(document).ready(function($) {
// Calculate sub-sums on any form changes
    $("#form").change(function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum = Number( $(this).find('unit').val()) * Number( $(this).find('price').val() );
          alert( sum );
        });
    });
});
</script>

但是，当

手动更改表单时，它有效，但当 ajax 自动附加价格时，它不起作用。

还有其他建议吗？

如果您的按钮 #form 带有最后添加的动态元素，那么您可以尝试一下，因为 .change 或 .on 不适用于动态附加的 html 元素。 jQuery给出了一个$（document）.on事件来做到这一点。

jQuery(document).ready(function($) {
// Calculate sub-sums on any form changes
    $(document).on('click','#form',function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum += Number( $(this).find('.unit').val()) * Number( $(this).find('.price').val() );
          alert( sum );
        });
    });
});

Javascript 更改的值不会触发 onchange 事件。这个规则也适用于JQuery的更改函数。因此，您可能需要在更新后手动触发 onchange 事件。使用Jquery，你可以使用.trigger（），检查这里：http://api.jquery.com/trigger/

试试这段代码，它将解决你的问题。

jQuery(document).ready(function() {
// Calculate sub-sums on any form changes
    $("#form").on('change',function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum +=  parseInt($(this).find('.unit').val()) +  parseInt($(this).find('.price').val());
        });
    });
});

您必须创建一个委托事件。

jQuery(document).ready(function() {
// Calculate sub-sums on any form changes
    $("#form").on('change','.price, .unit',function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum = Number( $(this).find('.unit').val()) * Number( $(this).find('.price').val() );
          alert( sum );
        });
    });
});