添加新行時總持續時間值應該改變，但它不會

Question

我有一個顯示總持續時間的文本框。現在會發生什麼是用戶從timepicker中選擇一個持續時間，這將顯示在文本框中，然後將其添加到新行中。現在我所遇到的情況是文本框的格式是這樣的「00小時00分00秒」。

因此，例如，如果總剩餘時間爲01小時30分20秒，並且您選擇00小時40分00秒從計時器（您使用timepicker滑塊選擇持續時間，然後單擊確定，值爲顯示在文本框中），然後將其添加到一個新行中，然後01小時30分鐘20秒應該減去00小時40分鐘00秒以使00小時50分鐘20秒。

問題在於，當我添加一行時，所選持續時間不會改變剩餘總時間。有人知道爲什麼嗎？

我使用的live（）方法沒有問題（即使我將來會改變它），我相信問題是我在jquery中的計算，但我不確定。

下面是小提琴中的代碼（這不顯示timepicker，這個jsfiddle在這裏向你展示代碼的樣子，以及如何添加一個新行）。

http://jsfiddle.net/7JWVJ/5/

我有一個應用程序，它工作正常，這是非常相似，我想這個應用程序做的，但這種使用普通的數字在文本框中。這是在下面的小提琴。只需打開小提琴並在文本框中輸入一個數字，單擊「添加」按鈕，它將從您輸入的數字中除去100.編輯已添加到其他數字的行，然後再次查看計算工作。這是正常的號碼撥弄之下，而持續時間的格式爲「00小時00分鐘00秒]，也就是你去兩個

http://jsfiddle.net/uThKQ/25/

Answer 1

確定這裏的主要區別：（代碼可以使用的更優化當然，不過這工作）

var duration = '01 Hrs 30 Mins 20 Secs'; 



$(document).ready(function(){ 

    $('#total-duration').html(duration); 

    $(function() { 
     $('#questiondurationpicker').trenttimepicker({ 
      timeFormat:'hh mm ss', 
      hourGrid: 4, 
      minuteGrid: 10, 
      secondGrid: 10, 
      showOn: 'button', 
      buttonImage: "Images/clock.gif", 
      buttonImageOnly: true 
     });   
    }); 

    $(".questiondurationpickerRow").live("change", calculateDuration); 
    $("#addQuestionBtn").live("click", calculateDuration); 
}); 



function insertQuestion(form) {  
    var $tr = $("<tr></tr>"); 
    var $duration = $("<td class='duration'></td>"); 

    $('#questiondurationpicker').each(function() { 
     var $this = $(this); 
     var $durationText = $("<input type='text' class='questiondurationpickerRow' readonly='readonly' />").attr('name',$this.attr('name')).attr('value',$this.val()) 
     $duration.append($durationText); 
    }); 

    $tr.append($duration); 
    $('#qandatbl').append($tr); 

    $('.questiondurationpickerRow').trenttimepicker({ 
     timeFormat:'hh mm ss', 
     hourGrid: 4, 
     minuteGrid: 10, 
     secondGrid: 10, 
     showOn: 'button', 
     buttonImage: "Images/clock.gif", 
     buttonImageOnly: true 
    }); 
} 

var format = duration.match(/(\d\d)/ig), 
hours = parseInt(format[0], 10), 
mins = parseInt(format[1], 10), 
secs = parseInt(format[2], 10); 

function calculateDuration() 
{ 
    var totalduration = duration; 
    var sign = ''; 
    var tmp_hours = 0; 
    var tmp_mins = 0; 
    var tmp_secs = 0; 

    $("#qandatbl td.duration input").each(function(){ 
     tmp_format = $(this).val().match(/(\d\d)/ig), 
     tmp_hours += parseInt(tmp_format[0], 10), 
     tmp_mins += parseInt(tmp_format[1], 10), 
     tmp_secs += parseInt(tmp_format[2], 10); 

    }); 

    newH = hours - tmp_hours; 
    newM = mins - tmp_mins; 
    newS = secs - tmp_secs; 

    if(newS < 0) { 
     newS += 60; 
     newM--; 
    } 
    if(newM < 0) { 
     newM += 60; 
     newH--; 
    }  

    if(newH < 0) { 
     newH = tmp_hours - hours; 
     newM = tmp_mins - mins; 
     newS = tmp_secs - secs; 
     if(newS < 0) { 
      newS += 60; 
      newM--; 
     } 
     if(newM < 0) { 
      newM += 60; 
      newH--; 
     }  
     sign = '- '; 
    }  

    checkedH = (newH < 10 ? '0' : '') + newH; 
    checkedM = (newM < 10 ? '0' : '') + newM; 
    checkedS = (newS < 10 ? '0' : '') + newS; 

    new_duration = sign + checkedH + ' Hrs ' + checkedM + ' Mins ' + checkedS + ' Secs'; 


    $("#total-duration").text(new_duration); 

}