javascript - .datepicker() 函数在第二次单击时起作用

Question

我有一个在运行时生成的日期选择器列表，每个都有一个 id，但都在同一类“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之间， child 的年龄在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

第二次单击时它正在工作，因为它没有获得焦点。检查创建的以下 fiddler 。

https://jsfiddle.net/0xr4jeba/

希望这会有所帮助!!!

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