JQuery Timepicker - On change 事件处理程序不工作？

Question

我正在使用具有以下输入字段的 jQuery 时间选择器 (http://timepicker.co/)。当我 select 从下拉列表中选择一个选项时， jquery on change 事件处理程序似乎没有触发。它似乎只有在我手动输入一个值并按下 tab 键时才有效？

<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

如果 JS 以务实的方式更改值，则不会触发事件。尽管另一方面 JS 可以实用地触发它们。当您在列表中选择时间时，插件不会触发它。大多数情况下，像这样的插件会公开自己的 API 和要绑定的事件。至少如果它们是好的插件。更新事件是必须的。查看 http://timepicker.co/options/ api 有 Change 事件的描述

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

这将运行每次更改代码。但是你必须在插件初始化的时候绑定这个事件。这可能需要重构代码。

Answer 2

使用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 3

这是我认为最好的答案，请关注你能试试吗

$(document).on('change', '.yourSelector', function (e) {
  //code is here work for me
}

Answer 4

这应该有效

$('#TmOnSite').on('changeTime', function() {
    var x = $("#TmOnSite").val();                    
});

Answer 5

这是解决方案：

$('document').ready(
 $('.timePicker').datetimepicker({
  //All de configuration of your datepicker
 });

 // Note that if you want the event to be for a specific element, 
 //  you must put the element ID instead of <<timePicker>>
 $('.timePicker').on('dp.change', function() {
  // What do you want to execute when the value change
 });
)

Answer 6

单击 select 下拉菜单时，我根本无法触发 change 事件。 当我在输入字段中键入文本时它会触发， 但当我 select 仅使用鼠标进行下拉时则不会。要使其正常工作，您只需将 onBlur 用于 blur 事件，该事件会在您从下拉列表中 select 一次时触发。

$(document).on('blur', '.yourSelector', function (e) {
     console.log("New value :::" + e.target.value + "|");
}

Answer 7

对我来说这个解决方案工作正常。

 <input
    type="text"
    v-model="time"
    class="form-control timepicker"
    name="time"
 />

 data() {
    return {
       time: "",
    };
  },

mounted() {
    var vm = this;
    $(".timepicker").timepicker({
      timeFormat: "h:mm p",
      interval: 60,
      scrollbar: true,
      change: function (time) {
         vm.time = $(this).val();
      },
    });
  },

Answer 8

$("#EventStartTime").on('change',
   function (time) {
    console.log("Selected time : " + time.currentTarget.value);
});

JQuery Timepicker - On change 事件处理程序不工作？

JQuery Timepicker - On change event handler not working?

javascript

jquery

timepicker