Question

我有一张桌子，我有两个日期选择器，可以选择追加一个新行。问题是当我添加一个新行时，datepicker不起作用。

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

Answer 1

Datepicker不绑定新创建的元素。我已经更新了你的答案。我所做的唯一更改就是将那些正在加载的元素放在一个单独的函数中，并在加载和单击时调用它们。

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));
            }
        }
    });
}

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

Answer 2

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

追加行时，Datepicker不起作用

2 个答案: