我在以下输入字段中使用 jQuery timepicker ( http://timepicker.co/)。当我从下拉列表中选择一个选项时,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>
最佳答案
使用改变
选项:
$(".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">
关于javascript - JQuery Timepicker - 更改事件处理程序不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46484410/