回发后jquery datepicker不起作用

Question

我有一个 j-query 日期选择器，在第一次回帖后不起作用。它仅在回发之前有效，但日期选择器在回发后不起作用。显示日期选择器的文本框用 ajax 更新面板包裹。这是我的 j 查询：

<script type="text/javascript">
    $().ready(function () {
        $('.date-picker').mousedown(function () {

            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
    });
</script>
<style type="text/css">
.ui-datepicker-calendar {
    display: none;
    }
</style>

Answer 1

您的问题是，在部分回发时，当 UpdatePanel 导致回发时会发生这种情况，DOM 不会重新加载，因此您的 $().ready(function () { 不会触发并连接日期选择器。这是 ASP.NET AJAX 陷阱之一。

解决此问题的一种方法是在PageRequestManager 通过UpdatePanel 执行部分回发时调用 JavaScript 函数，如下所示：

<script type="text/javascript">
    $().ready(function () {
        $('.date-picker').mousedown(function () {

            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        // Re-bind your jQuery objects here

    });
</script>

注意：这是 jQuery 和 ASP.NET AJAX 如果不进行一些调整就无法正常运行的地方之一。