jQuery 更改事件被触发两次

Question

我有一个包含日期的输入字段的表单。

下面是我的代码；

<form action="/test/" method="get" class="form-horizontal">
    <!-- truncated codes -->
    <label class="col-sm-1 control-label">Date:</label>
    <div class="col-sm-2">
        <div class="input-group m-b-none">
            <span class="input-group-addon btn btn-success btn-sm btn-outline"><i class="fa fa-calendar"></i></span>
            <input type="text" name="date" value="{{ $date }}" class="form-control start_date" id="date" autocomplete="off" required>
        </div>
    </div>
</form>

这是我的 jQuery 代码

$('.start_date').change(function () {
    var timestamp = Date.parse($("input[name='date']").val());

    if (isNaN(timestamp) == false) {
        date = $('.start_date').val();
        // call function
    } else {
        var prev = $(this).data('val');
        alert('Invalid Date');
        $('#date').val(prev);
    }
});

$('#date').datepicker({
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true,
    format: 'yyyy-mm-dd'
});

我不明白为什么每次更改日期后，此函数都会运行两次。

我做错了什么，我该如何解决？

我正在使用 jQuery 版本 3.1.1 并且已经尝试过 this。

此外，我在页面的其他任何地方都没有 .start_date。

Answer 1

您可能在页面的其他地方也有 '.start_date'。
我建议你使用off()

$('.start_date').off().change(function (){
          var timestamp =             Date.parse($("input[name='date']").val());
          if (isNaN(timestamp) == false) {
            date = $('.start_date').val();
            /*call function*/
         }
         else{
            var prev = $(this).data('val');
            alert('Invalid Date');
            $('#date').val(prev);
         }
       });

Answer 2

问题是我的 bootstrap 日期选择器更改事件触发了两次。诀窍是使用 changeDate 而不是 change。

$('.start_date').on("changeDate", function() {

});

jQuery 更改事件被触发两次

jQuery change event being fired twice

jquery-ui-datepicker

jquery-3