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

，最好的辦法是使用其用於將一個或多個事件處理程序附加到元素的.on()事件：

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

Answer 2

當你動態地添加一個新行到表中， 「keyup」事件不會自動綁定到它。實際上，您需要將「keyup」事件綁定包裝到函數中，然後在添加新行後調用它。沿着線的東西：

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