JQuery Timepicker - 変更イベントハンドラが動作していませんか？

Question

次の入力フィールドにjQueryのタイムピッカー（http://timepicker.co/）を使用しています。ドロップダウンからオプションを選択すると、jquery on changeイベントハンドラが起動しないようです。手動で値を入力してタブキーを押すと動作するように見えますか？

<input id="TmOnSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOnSite" aria-invalid="false"> 
<input id="TmOffSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOffSite" aria-invalid="false"> 
<input id="TmTotalHrsOnSite" class="" type="text" value="" readonly="true" name="TmTotalHrsOnSite"> 

<script> 

$(function() { 

    TimePicker(); 

}); 

var TimePicker = function() { 

    if ($(".timepicker").length === 0) { return; } 

    $(".timepicker").timepicker({ 
     timeFormat: 'HH:mm', 
     interval: 30, 
     scrollbar: true 
    }); 

}; 

var tmTotalHrsOnSite = function() { 

    $(document).on('change select', '.js-tm-on-site', function (e) { 

     if ($("#TmOnSite") && $("#TmOffSite")) { 

      var startTime = moment($("#TmOnSite").val(), "HH:mm"); 
      var endTime = moment($("#TmOffSite").val(), "HH:mm"); 
      var duration = moment.duration(endTime.diff(startTime)); 
      $("#TmTotalHrsOnSite").val(duration.asHours().toFixed(2)); 
     } 
    }); 

}(); 

</script> 

Answer 1

使用changeオプション：

$(".timepicker").timepicker({ 
    timeFormat: 'HH:mm', 
    interval: 30, 
    scrollbar: true, 
    change: tmTotalHrsOnSite 

}）。

$(function() { 
 

 
    TimePicker(); 
 

 
}); 
 

 
var TimePicker = function() { 
 

 
    if ($(".timepicker").length === 0) { return; } 
 

 
    $(".timepicker").timepicker({ 
 
     timeFormat: 'HH:mm', 
 
     interval: 30, 
 
     scrollbar: true, 
 
     change: tmTotalHrsOnSite 
 
    }); 
 

 
}; 
 

 
function tmTotalHrsOnSite() { 
 

 
    console.log('changed.'); 
 

 
     if ($("#TmOnSite") && $("#TmOffSite")) { 
 

 
      var startTime = moment($("#TmOnSite").val(), "HH:mm"); 
 
      var endTime = moment($("#TmOffSite").val(), "HH:mm"); 
 
      var duration = moment.duration(endTime.diff(startTime));     $("#TmTotalHrsOnSite").val(duration.asHours().toFixed(2)); 
 
     } 
 

 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script> 
 
<input id="TmOnSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOnSite" aria-invalid="false"> 
 
<input id="TmOffSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOffSite" aria-invalid="false"> 
 
<input id="TmTotalHrsOnSite" class="" type="text" value="" readonly="true" name="TmTotalHrsOnSite">

Answer 2

JSが値を実用的に変更する場合、イベントは発生しません。一方、JSは実際にそれらを引き起こすことができます。リストで時間を選択すると、プラグインはそれをトリガーしません。ほとんどの場合、このようなプラグインは、バインドするイベントを持つ独自のAPIを公開します。少なくとも彼らが良いプラグインであれば。更新イベントは必須です。 API ためhttp://timepicker.co/options/をチェック これは、それぞれの変更でコードを実行しますChangeイベント

$('.js-tm-on-site').timepicker({ 
    change: function(time) { 
     /* Code here */ 
    } 
}); 

の説明があります。しかし、プラグインが初期化された時点でこのイベントをバインドする必要があります。これにより、コードの再構成が必要になることがあります。