jQuery-克隆元素的总和不适用于功能输入

Question

这是我的代码：

$(document).ready(function() {
  $('#clone').click(function() {
    var target = $(this).closest('.groupcontainer');
    target.clone(true, true).insertAfter(target);
  });

  $('.input').on('input',function(){
    $(this).parent().children('.grouptotal').val($(this).val() * $(this).parent().children('.input2').val());
  });

  $('.input2').on('input', function(){
    $(this).parent().children('.grouptotal').val($(this).val() * $(this).parent().children('.input').val());
  });
});  

$(document).on('change', '.grouptotal', function(){
  var sum = 0;
    $('.grouptotal').each(function(){
    sum += +$(this).val();
    });
    $('#subtotal').val(sum);
});

我的问题是，我需要#subtotal添加的每个实例.grouptotal ，但#subtotal当它到达它的输入来自未更新

$('.input').on('input',function(){
  $(this).parent().children('.grouptotal').val($(this).val() * 
  $(this).parent().children('.input2').val());
  });

$('.input2').on('input', function(){
  $(this).parent().children('.grouptotal').val($(this).val() *   
  $(this).parent().children('.input').val());
  });

如果我将数字手动放在.grouptotal则#subtotal将更新。 有人可以向我解释我所缺少的吗？

这是小提琴 。 它看起来有些草率，但是却给出了主意。

数量*系统将自动更新我的.grouptotal

如何使#subtotal接受.grouptotal并自动添加它们？ 我试过将$(document).on('change', '.grouptotal', function(){ “ change”更改为'input'和其他几个，但是没有运气。

同样，如果单击#clone按钮以复制组，则它必须能够正常工作。

Answer 1

使用val('value')以编程方式设置值时，不会触发change事件，您必须实际触发它

$(this).parent().children('.grouptotal').val( $(this).val() ).trigger('change')

Answer 2

让我们再试一次。 显然，以编程方式更改组总计值不会触发更改事件。 我本以为会，所以您的代码对我来说看起来很正确。 为了解决这个问题，我添加了一个显式触发器“ .grouptotal”。 您可以在这里看到小提琴 。

只需添加代码：

('.grouptotal').change();

你们两个处理程序的总和是输入的总和。 可能不是您要寻找的解决方案，但它似乎有效