javascript - 值更改后更新 Javascript

标签 javascript jquery

现在我有一个计算startTimeEndTime - breakTime 的项目。 并将其显示到 WorkedHours 字段中。

像这样: enter image description here

我有一个时间选择器来选择时间,但我的计算脚本在我更改值后没有运行。当我进入文本框时它运行。 所以如果我要这样改变它: enter image description here

它不会更新 Tid Jobbad 直到我再次进入同一个文本框。如何让它在每次值更改时调用该函数?

这是脚本:

    $(function() {
    $('#breakTime,#startTime,#endTime')
      .blur(CalculateTime);
    CalculateTime();
});


function CalculateTime() {
    try {
        var originalStartTime = $('#startTime').val(),
          originalEndTime = $('#endTime').val(),
          originalBreakTime = $('#breakTime').val();

        // breaking hours and minutes. needed format: HH:mm
        var startHours = originalStartTime.substring(0, 2).replace(':', ''),
          startMinutes = originalStartTime.substring(3, 5),
          endHours = originalEndTime.substring(0, 2).replace(':', ''),
          endMinutes = originalEndTime.substring(3, 5);

        // momentJs variables
        var mStart = moment().hour(startHours).minute(startMinutes),
          mEnd = moment().hour(endHours).minute(endMinutes),
          mBreak = moment.duration(originalBreakTime);

        var result = mEnd.subtract(mStart).subtract(mBreak).format('HH:mm');

        $('#workedHours').val(result);

    } catch (err) {
        $('#workedHours').val(err);
    }
}

最佳答案

Y 正在使用 blur 事件,当它失去焦点时它被发送到一个元素。所以如果你想在 change 上重新计算值,你需要绑定(bind) onChange javascript 事件:

$('#breakTime, #startTime, #endTime').change(CalculateTime);

关于javascript - 值更改后更新 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32498976/

相关文章:

jquery - Bootstrap - 以编程方式附加并显示弹出框到元素

javascript - 如何修复浏览器移动 View 中未定义问题的 jQuery 'length'?

javascript - pubnub 和 head.js

javascript - 为什么浏览器仍然允许 Javascript 查看 cookie?

javascript - 如何在 Amazon Linux AMI 上运行端到端测试?

javascript - 验证失败时停止页面重新加载

javascript - 编写这样的 jquery onload 函数有什么好处吗?

javascript - 使用 babel 转译基于类的 Web 组件

javascript - 括号中缺少 JS(第 88 行)

jQuery Ajax 方法不返回 XHR 对象