JQuery Timepicker - On change event handler not working?

Question

I am using jQuery timepicker (http://timepicker.co/) with the following input fields. When I select an option from the dropdown, the jquery on change event handler doesnt seem to fire. It only seems to work when I manually enter a value and hit the tab key?

<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

Use change option:

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

Events don't fire if JS changes values pragmatically. Though on the other hand JS can pragmatically trigger them. When you choose time in the list the plugin does not trigger it. Most of the time plugins like this one will expose their own API with events to bind to. At least if they are good plugins. Update event is a must. Check out http://timepicker.co/options/ for api There is a description of Change event

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

This will run the code on each change. But you have to bind this event at the time when the plugin is initialized. This may require restructuring the code.