追加行时日期选择器不起作用答案

【问题标题】：Datepicker not working when appending row追加行时日期选择器不起作用
【发布时间】：2016-09-19 19:33:54
【问题描述】：

我有一个表，其中有两个日期选择器，并且可以选择追加新行。问题是当我添加新行时，日期选择器不起作用。

<script>
$(document).ready(function () {

    $('.txtDate22').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'MM yy',
          showButtonPanel: true,

        onClose: function () {
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            $(this).datepicker('refresh');
        },

        beforeShow: function () {
            if ((selDate = $(this).val()).length > 0) {
                iYear = selDate.substring(selDate.length - 4, selDate.length);
                iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            }
        }
    });

    $(".txtDate22").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });

    $(".txtDate22").blur(function () {
        $(".ui-datepicker-calendar").hide();
    });
});

</script>

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

日期选择器不绑定新创建的元素。我已经更新了你的答案。我所做的唯一更改是将加载中的元素放在单独的函数中，并在加载和点击时调用它们。

function date_picker(){
 $('.txtDate').datepicker({

        changeMonth: true,
        changeYear: true,
        dateFormat: 'MM yy',
          showButtonPanel: true,

        onClose: function () {
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            $(this).datepicker('refresh');
        },

        beforeShow: function () {
            if ((selDate = $(this).val()).length > 0) {
                iYear = selDate.substring(selDate.length - 4, selDate.length);
                iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            }
        }
    });
    $('.txtDate22').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'MM yy',
          showButtonPanel: true,

        onClose: function () {
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            $(this).datepicker('refresh');
        },

        beforeShow: function () {
            if ((selDate = $(this).val()).length > 0) {
                iYear = selDate.substring(selDate.length - 4, selDate.length);
                iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            }
        }
    });
}

因此，如果您想添加类似的操作，就像您正在做的那样，那么只需在此处添加这些操作。

【讨论】：

嗯不确定您所做的更改？

【解决方案2】：

您可能没有为新添加的元素调用datepicker()。即使是同一个类，以后添加到DOM的元素也不会自动调用该函数。

【讨论】：