javascript - jQuery - 计算输入字段的总和，包括稍后添加的字段

Question

我有一个表单，您可以在其中添加更多输入字段。所有人都有相同的班级。每当更改输入字段时，我都会计算所有这些输入字段的总和。

它适用于所有现有字段。一旦我尝试使用新添加的字段，它就不再起作用了。

我想我可能不得不使用“现场”事件。但无法弄清楚如何。

这是我的代码：

$('.price_item').change(function() {
   var ntotal = 0;
   $('.price_item').each(function() {
      ntotal += parseFloat($(this).val());
   });
});

我应该怎么办？

Answer 1

您必须将事件处理程序放在文档上，因为您需要它来处理尚不存在的元素。

$(document).on('change', '.price_item', function() {
    var ntotal = 0;
    $('.price_item').each(function(){
        ntotal += parseFloat($(this).val());
    });
});

添加 JSFiddle：JSFiddle

Answer 2

使用on()之类的，

$(document).on('change', '.price_item', function() {
    var ntotal = 0;
    $('.price_item').each(function(){
        ntotal += parseFloat($(this).val());
    });
});

Answer 3

http://api.jquery.com/on/应该可以满足您的需要：

$(document).on('change', '.price_item', handlePriceItemChange);
function handlePriceItemChange(){
  var ntotal = 0;
   $('.price_item').each(function(){
      ntotal += parseFloat($(this).val());
   });
}

Answer 4

从 jQuery 1.9 开始，你不能使用 .live()，所以你应该使用 .on()。

尝试这样的事情：

jQuery(function($){
$(document).on('change', 'input', function(){

    var ntotal = 0;
    $('.price_item').each(function(){
        ntotal += parseFloat($(this).val());
    });

    console.log('sum: ' + ntotal);

    //adds new input for testing
    $(this).after('<input type="text" class="price_item" />');
});               
});