Question

我正在使用带有以下输入字段的jQuery timepicker（http://timepicker.co/）。当我从下拉列表中选择一个选项时，更改事件处理程序上的jquery似乎不会触发。当我手动输入一个值并点击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

使用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以及要绑定的事件。至少如果他们是好的插件。更新事件是必须的。查看http://timepicker.co/options/了解api 有一个变更事件的描述

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

这将在每次更改时运行代码。但是，您必须在初始化插件时绑定此事件。这可能需要重组代码。

Answer 3

这是我认为最好的答案，请遵循你可以尝试

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

Answer 4

这应该有效

xxx.xxx -> zzz -> aaa -> yyy

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

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

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

JQuery Timepicker - 在更改事件处理程序不工作？

6 个答案: