jQuery的總和值

Question

進出口試圖計算創建的輸入值的sum，但不知其沒有給予正確的結果（例如：如果我創建2輸入具有值1它顯示3）

HTML：

<a href="#" class="new">new</a> 
<a href="#" class="report">report</a> 
<div class="container"></div> 
<p>total:<span></span></p> 

JS：

var total = 0; 

$('.new').click(function(){ 
    $("div").append('<input type="text" name="amount"/>'); 
}); 

$('input').live('keyup', function(){ 
    $('.container input').each(function(){ 
     total += parseInt($(this).val()); 
    }); 
    $('span').html(total); 
}); 

$('.report').live('click', function(){ 
    $('.container input').each(function(){ 
     alert('input: '+$(this).val()); 
    }); 
}); 

這裏是小提琴：http://jsfiddle.net/Wn2cs/4/

Answer 1

live()已被棄用，並且你應該使用on()。

問題在於全局變量total，並且在您繼續添加到該全局的每個鍵上時，它不會重置。它應該在事件處理程序，而不是被定義爲：

$('.container').on('keyup', 'input', function(){ 
    var total = 0; 
    $('.container input').each(function(){ 
     total += parseInt($(this).val(),10); 
    }); 
    $('span').html(total||0); // avoids NaN 
}); 

FIDDLE

Answer 2

試試這個：

$('input').live('keyup', function(){ 
    var total = 0; 

    $('.container input').each(function(){ 
     var value = parseInt($(this).val()); 
     total += value; 
    }); 
    $('span').html(total); 
}); 

$('.report').live('click', function(){ 
    alert($('.container input').length); 
}); 

Answer 3

<div id="input-container"> 
    <a href="#" class="new">New</a> 
    <a href="#" class="report">Report</a> 

    <div id="inputs-area"></div> 

    <p>Total:<span id="total">0</span></p> 
</div> 

var InputCalculator = (function ($) { 

    /* Static Content */ 
    var _$container = $('#input-container'); 
    var _$inputsArea = $('#inputs-area'); 
    var _$total = $('#total'); 

    /* Helpers */ 
    var _getTotal = function() { 
     var total = 0; 

     _$inputsArea.find('input').each(function() { 
      var currentValue = parseInt(this.value, 10); 

      if (!isNaN(currentValue)) { 
       total += currentValue; 
      } 
     }); 

     return total; 
    }; 

    /* Events */ 
    var _createReportEvent = function (e) { 
     e.preventDefault(); 

     alert('Total: ' + _getTotal()); 
    }; 

    var _createInputEvent = function(e) { 
     e.preventDefault(); 

     _$inputsArea.append($('<input>', { type: 'text' })); 
    }; 

    var _recalculateEvent = function() { 
     _$total.text(_getTotal()); 
    }; 

    var _bindEvents = function() { 
     _$container.on('click', 'a.report', _createReportEvent); 
     _$container.on('click', 'a.new', _createInputEvent); 
     _$inputsArea.on('keyup', 'input', _recalculateEvent); 
    }; 

    var init = function() { 
     _bindEvents(); 
    }; 

    return { 
     init: init 
    }; 

})(jQuery); 

InputCalculator.init();