Событие изменения 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'
});

IНе понимаю, почему после каждого изменения даты эта функция запускается дважды.

Что я делаю не так и как я могу это исправить?

Я использую jQuery версии 3.1.1 иуже попробовал это .

Кроме того, у меня нет .start_date где-либо еще на странице.

Answer 1

Проблема в том, что мой стартовый запуск события изменения даты запуска стартовал два раза. Хитрость заключается в том, чтобы использовать changeDate вместо change.

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

});

Answer 2

1. Возможно, у вас есть '.start_date' и в другом месте на странице.

2. Я предлагаю вам использовать 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);
         }
       });