jQuery change event being fired twice

Question

I have a form with input fields including a date.

Below is my code;

<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>

and it is my jQuery code

$('.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 don't understand why after each change in date, this function runs twice.

What am I doing wrong and how can I fix it?

I'm using jQuery version 3.1.1 and already tried this.

Also, I don't have .start_date anywhere else in the page.

Answer 1

Problem is my bootstrap datepicker change event fire two times. The trick is to use changeDate instead of change.

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

});

Answer 2

1. You might have '.start_date' somewhere else in the page as well.

2. I suggest you use 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);
         }
       });