.datepicker() работает на втором клике

Question

У меня есть список datepickers сгенерированного во время выполнения, каждый с идентификатором, но все под тем же классом «DatePicker»

<input class="datepicker" data-id="Adult" id="datepicker-0" Name="DateOfBirth0"> 
<input class="datepicker" data-id="Child" id="datepicker-1" Name="DateOfBirth1"> 
<input class="datepicker" data-id="Child" id="datepicker-2" Name="DateOfBirth2"> 

В JavaScript, я хочу сделать возраст взрослого между 13 и 90, а также детей в возрасте от 2 до 12. Таким образом, я делаю это:

$(function() { 
     $(".datepicker").click(function() { 
      var aId = this.id.split('-'); 
      var refNum = aId[1]; 
      var dataId = $("#datepicker-" + refNum).attr('data-id'); 

      var minDate = ""; 
      var maxDate = ""; 
      if (dataId == 'Adult') { 
       minDate = "-90Y"; 
       maxDate = "-13Y"; 
      } 
      else if (dataId == 'Child') { 
       minDate = "-12Y"; 
       maxDate = "-2Y"; 
      } 

      $("#datepicker-" + refNum).datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       maxDate: maxDate, 
       minDate: minDate 
      }); 
     }); 
    }); 

Так странно, что происходит, является то, что при загрузке страницы, первый раз я нажимаю на " .datepicker ", ничего не происходит. Второй раз я нажимаю на ввод, появляется календарь даты.

Любая идея, почему?

Answer 1

Он работает на второй клик, потому что он не принимает фокус. Проверить создание скрипача.

https://jsfiddle.net/0xr4jeba/ 

Надеюсь, это поможет !!!

$("#datepicker-" + refNum).datepicker({ 
           changeMonth: true, 
           changeYear: true, 
           maxDate: maxDate, 
           minDate: minDate 
          }).focus(); 

Answer 2

Попробуйте добавить

$(document).ready(function() { 

    $(".datepicker").click(function() { 
       var aId = this.id.split('-'); 
       var refNum = aId[1]; 
       var dataId = $("#datepicker-" + refNum).attr('data-id'); 

       var minDate = ""; 
       var maxDate = ""; 
       if (dataId == 'Adult') { 
        minDate = "-90Y"; 
        maxDate = "-13Y"; 
       } 
       else if (dataId == 'Child') { 
        minDate = "-12Y"; 
        maxDate = "-2Y"; 
       } 

       $("#datepicker-" + refNum).datepicker({ 
        changeMonth: true, 
        changeYear: true, 
        maxDate: maxDate, 
        minDate: minDate 
       }); 
      }); 

    }); 

Это гарантирует, что загружен документ и listners событий проволоки перед щелкая