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

であるあなたは、動的に似DOM要素を生成するためにeventリスナーをバインドするevent委任技術を使用する必要があります。

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

としてもvar inputs = $('.kk');event内のハンドラのコードを移動する必要があります以下：

$(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>