.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岁之间，孩子的年龄在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“输入时，什么也没有发生。第二次单击输入时，将出现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
                });
            });

    });

这可确保文档已加载，并且事件侦听器在单击之前已连接好