jQuery動的コンテンツ計算

Question

私のコードは静的な部分と完全に動作していますが、新しい行を追加するとフィールドが計算されません。何が間違っているのですか？

あなたが動的にテーブルに新しい行を追加するとそれは、行の追加]ボタンを経由しても

Live DEMO

<div class="container"> 
<table id="t1" class="table table-hover"> 
     <tr> 
      <th class="text-center">Start Time</th> 
      <th class="text-center">End Time</th> 
      <th class="text-center">Stunden</th> 
      <th> <button type="button" class="addRow">Add Row</button></th> 
     </tr> 
     <tr id="row1" class="item"> 
      <td><input name="starts[]" class="starts form-control" ></td> 
      <td><input name="ends[]" class="ends form-control" ></td> 
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td> 
     </tr> 
    </table> 
</div> 

JS

$(document).ready(function(){ 
$('.item').keyup(function(){ 

     var starts = $(this).find(".starts").val(); 
     var ends = $(this).find(".ends").val(); 
        var stunden; 
     s = starts.split(':'); 
     e = ends.split(':'); 

     min = e[1]-s[1]; 
     hour_carry = 0; 
     if(min < 0){ 
      min += 60; 
      hour_carry += 1; 
     } 
     hour = e[0]-s[0]-hour_carry; 
     min = ((min/60)*100).toString() 
     stunden = hour + "." + min.substring(0,2); 

     $(this).find(".stunden").val(stunden); 
});  

// function for adding a new row 
      var r = 1; 
      $('.addRow').click(function() { 
      if(r<10){ 
       r++; 
       $('#t1').append('<tr id="row'+ r +'" class="item"><td><input name="starts[]" class="starts form-control" ></td><td><input name="ends[]" class="ends form-control" ></td><td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td></tr>'); 
       } 
      }); 
       // remove row when X is clicked 
      $(document).on("click", ".btn_remove", function() { 
      r--; 
      var button_id = $(this).attr("id"); 
       $("#row" + button_id + '').remove(); 
      }); 


    }); 

Answer 1

最善のことは、要素に1つ以上のイベントハンドラを取り付けるために使用される.on()イベントを使用することです：あなたが既に持っている場合は、最初の

$(document).on('keyup', '.item',function(){ 
//your code 
} 

Answer 2

を追加されたダイナミックなフィールドを計算する必要があります"keyup"イベントは自動的にバインドされません。基本的には、関数に "keyup"イベントバインディングをラップし、新しい行を追加した後に呼び出す必要があります。線に沿って何か：

function rebindKeyup(){ 
     $('.item').keyup(function(){ 
     // Key up logic 
     } 
}