jQuery函数在一个aspx中工作但不能在另一个几乎完全相同的aspx中工作

Question

在我的MasterPage.master页面中，我有两个jquery函数：

function calcTime() {
    var time1 = $(".timepickerFrom").val().split(':'),
      time2 = $(".timepickerTo").val().split(':');
    var hours1 = parseInt(time1[0], 10),
      mins1 = parseInt(time1[1], 10),
      hours2 = parseInt(time2[0], 10),
      mins2 = parseInt(time2[1], 10),
      time = "";

    var diff = 0,
      hours = 0,
      mins = 0;

    mins1 = (hours1 * 60) + mins1;
    mins2 = (hours2 * 60) + mins2;
    diff = mins2 - mins1;
    if (diff < 0) {
        diff = 1440 + diff;
        document.getElementById('labelTime').style.display = 'block';
    }
    else {
        document.getElementById('labelTime').style.display = 'none';
    }

    hours = Math.floor((diff / 60), 0);
    mins = Math.round((((diff / 60) - hours) * 60), 0);
    time = hours + ":" + Right("00" + mins, 2);

    if (time == "NaN:aN") {
        time = "0:00";
    }

    $(".timepickerTime").val(time);
};

function calcTo() {
    var time1 = $(".timepickerFrom").val().split(':'),
      time2 = $(".timepickerTime").val().split(':');
    var hours1 = parseInt(time1[0], 10),
      mins1 = parseInt(time1[1], 10),
      hours2 = parseInt(time2[0], 10),
      mins2 = parseInt(time2[1], 10),
      time = "";

    var diff = 0,
      hours = 0,
      mins = 0;

    mins1 = (hours1 * 60) + mins1;
    mins2 = (hours2 * 60) + mins2;
    diff = mins1 + mins2;

    if (diff >= 1440) {
        diff = diff - 1440;
        document.getElementById('labelTime').style.display = 'block';
    }
    else {
        document.getElementById('labelTime').style.display = 'none';
    }

    hours = Math.floor(diff / 60, 0);
    mins = Math.round(((diff / 60) - hours) * 60, 0);
    time = hours + ":" + Right("00" + mins, 2);

    if (time == "NaN:aN") {
        time = "0:00";
    }

    $(".timepickerTo").val(time);
};

两个都工作正常。

然后我有一个页面：NewRecord.aspx有这些代码行：

<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Čas od </label>
    <div class="col-sm-9">
        <div class="input-group col-xs-10 col-sm-5">
            <input id="timepickerFrom" name="timepickerFrom" type="text" class="form-control timepickerFrom" value="<%= this.InputValue_timepickerFrom %>" />
            <span class="input-group-addon">
                <i class="fa fa-clock-o bigger-110"></i>
            </span>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Čas do </label>
    <div class="col-sm-9">
        <div class="input-group col-xs-10 col-sm-5">
            <input id="timepickerTo" name="timepickerTo" type="text" class="form-control timepickerTo" value="<%= this.InputValue_timepickerTo %>" />
            <span class="input-group-addon">
                <i class="fa fa-clock-o bigger-110"></i>
            </span>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Čas skupaj </label>
    <div class="col-sm-9">
        <div class="input-group col-xs-10 col-sm-5">
            <input id="timepickerTime" name="timepickerTime" type="text" class="form-control timepickerTime" value="<%= this.InputValue_timepickerTime %>" />
            <span class="input-group-addon">
                <i class="fa fa-clock-o bigger-110"></i>
            </span>
        </div>
    </div>
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"></label>
    <div class="col-sm-9">
        <label id="labelTime" style="display: none; color: red">Pozor! Čas do je manjši od časa od.</label>
    </div>
</div>

并且计算工作正常。当我改变或改变它时，重新计算时间，当我改变时间时，它会重新计算。

然后我还有一个文件：VacationNewRecord.aspx 像这样的代码：

    <div class="col-sm-9">
        <div class="input-group col-xs-10 col-sm-5">
            <input id="timepickerFrom" name="timepickerFrom" type="text" class="form-control timepickerFrom" value="<%= this.InputValue_timepickerFrom %>" />
            <span class="input-group-addon">
                <i class="fa fa-clock-o bigger-110"></i>
            </span>
        </div>
    </div>
</div>

<div class="form-group hidden" id="cas2" runat="server">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Čas do </label>

    <div class="col-sm-9">
        <div class="input-group col-xs-10 col-sm-5">
            <input id="timepickerTo" name="timepickerTo" type="text" class="form-control timepickerTo" value="<%= this.InputValue_timepickerTo %>" />
            <span class="input-group-addon">
                <i class="fa fa-clock-o bigger-110"></i>
            </span>
        </div>
    </div>
</div>

<div class="form-group hidden" id="cas3" runat="server">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Čas skupaj </label>

    <div class="col-sm-9">
        <div class="input-group col-xs-10 col-sm-5">
            <input id="timepickerTime" name="timepickerTime" type="text" class="form-control timepickerTime" value="<%= this.InputValue_timepickerTime %>" />
            <span class="input-group-addon">
                <i class="fa fa-clock-o bigger-110"></i>
            </span>
        </div>
    </div>
</div>

以及如何调用函数：

     $('.timepickerFrom').timepicker({
        minuteStep: 15,
        showSeconds: false,
        showMeridian: false,
        disableFocus: true,
        appendWidgetTo: "body",
        icons: {
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down'
        }
    }).on('change', function () {
        calcTime();
    }).next().on(ace.click_event, function () {
        $(this).prev().focus();
    });

    $('.timepickerTo').timepicker({
        minuteStep: 15,
        showSeconds: false,
        showMeridian: false,
        disableFocus: true,
        icons: {
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down'
        }
    }).on('change', function () {
        calcTime();
    }).on('focus', function () {
        $('#timepickerTo').timepicker('showWidget');
    }).next().on(ace.click_event, function () {
        $(this).prev().focus();
    });

    $('.timepickerTime').timepicker({
        minuteStep: 15,
        showSeconds: false,
        showMeridian: false,
        disableFocus: true,
        icons: {
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down'
        }
    }).on('change', function () {
        calcTo();
    }).on('focus', function () {
        $('#timepickerTime').timepicker('showWidget');
    }).next().on(ace.click_event, function () {
        $(this).prev().focus();
    });

两个文件中的代码几乎完全相同。我使用类选择器。那么为什么第一个aspx中的代码工作正常，而第二个工作中的代码只有在我改变时间时呢？