jquery - 使用 jquery 动态查找总计

Question

我正在生成动态文本框，并希望对所有文本框值执行求和运算，但它不起作用。

下面是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id='dynamicdiv'>
Val1:<input type="text" class='kk' name="qty[]">
</div>
<input type="button" id='btnadd' name="" value="ADD"> 
<input type="hidden" id="hdntxt" value="1">
<p>
    Total : <span id="total"></span>
</p>
<script type="text/javascript">
    $("#btnadd").click(function () {
            i=$('#hdntxt').val();
            i++;
            $("#dynamicdiv").append('<br>Val'+i+':<input type="text" class="kk" name="qty[]">');
            $('#hdntxt').val(i);
        });
    var inputs = $('.kk');
    $('.kk').on("blur","input",function(){
        var total = 0;
        $.each(inputs, function(input){
            var num = parseInt(inputs[input].value,10);
            total += (!isNaN(num))? num : 0;
        });
        $("#total").html(total);
    })
</script>

Answer 1

您必须使用event委托(delegate)技术将event监听器绑定(bind)到动态生成的DOM元素，例如:

$(document).on("blur", "input.kk", function() {

还需要在事件处理程序代码中移动var input = $('.kk');，如下所示:

$(document).ready(function() {
  $("#btnadd").click(function() {
    i = $('#hdntxt').val();
    i++;
    $("#dynamicdiv").append('<br>Val' + i + ':<input type="text" class="kk" name="qty[]">');
    $('#hdntxt').val(i);
  });

  $(document).on("blur", "input.kk", function() {
    var total = 0;
    var inputs = $('.kk');
    $.each(inputs, function(input) {
      var num = parseInt(inputs[input].value, 10);
      total += (!isNaN(num)) ? num : 0;
    });
    $("#total").html(total);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='dynamicdiv'>
  Val1:
  <input type="text" class='kk' name="qty[]">
</div>
<input type="button" id='btnadd' name="" value="ADD">
<input type="hidden" id="hdntxt" value="1">
<p>
  Total : <span id="total"></span>
</p>