通过ajax加载页面后datepicker不工作

Question

我正在使用带有 jquery 1.10.1 和 jquery ui 1.10.3 的 asp.net mvc 2。

当我使用 $.ajax 加载页面时，日期选择器有点不对劲。它会像往常一样弹出并返回，但与它的交互已中断。

例如：我点击输入 => 弹出日期选择器 => 选择一个日期 => 错误当前日期未定义

一个页面可以有多个带有日期选择器的输入，这就是我在代码中使用 .each 的原因。

我有 2 个页面：Index.aspx 和 PatchDef.aspx。 Index 使用 $.ajax 调用动态加载 PatchDef.aspx。

在 PatchDef.aspx 中，我使用带有 $(document).ready 代码的标签，它将日期选择器绑定到我的输入。

这是我现在使用的代码：

$(document).ready(function () {
    $(".datePickerPatchDef").each(function () {
                    var dateFormat = $(this).attr("dateFormatPatchDef").toLowerCase();
                    $(this).datepicker({
                        dateFormat: dateFormat,
                        changeMonth: true,
                        changeYear: true
                    });
   });
});

我还尝试了以下代码，发现 here ：

注意：这里的类类似于 dpCount1; dpCount2, ...

$(".datePickerPatchDef").each(function () {
                var dateFormat = $(this).attr("dateFormatPatchDef").toLowerCase();
                $(this).datepicker({
                var dpCountClass;
                var allClasses = $(this).attr("class").split(' ');

                for (var i = 0; i < allClasses.length; ++i) {
                    var singleClass = allClasses[i];
                    if (singleClass.match("^dpCount")) {
                        dpCountClass = "." + singleClass;
                    }
                }

                $("#switchUser").text(dpCountClass);
                $("body").on("focusin", dpCountClass, function () {
                    $(this).datepicker({
                        dateFormat: dateFormat,
                        changeMonth: true,
                        changeYear: true
                    });
                });
            });
        }

我以为第二次尝试可以解决动态加载问题，但事实并非如此。

我得到的确切错误是：

Microsoft JScript 运行时错误：无法设置属性值 'currentDay': 对象为空或未定义

然后进入代码

o.selectedDay=o.currentDay=t("a",n).html()

其中 o = 未定义

因此，如果您有任何建议，我可以随时使用。 如果您需要更多信息，请询问！

Answer 1

我遇到了同样的问题，这对我有用。 希望这会有所帮助

在 Ajax 调用之前禁用所有日期选择器

$(".datePicker").datepicker("destroy"); 
$(".datePicker").removeClass("hasDatePicker"); 
$(".datePicker").removeAttr("Disabled");

以及在可以添加或删除 DOM 元素的 Ajax 调用之后 然后重新初始化 Datepicker

$(".datePicker").datepicker({ dateFormat: "dd/mm/yy", showOn: "focus" });

而且你还必须调用它......这非常重要，因为这将重新绑定 JQuery DOM

jQuery.datepicker.dpDiv.appendTo(jQuery('body'));

  var RemoveJQUIDatepicker = function () {
	
   
   
	$(".datePicker").datepicker("destroy");
	$(".datePicker").removeClass("hasDatePicker");
	$(".datePicker").removeAttr("Disabled");
   
};


var SetJQUIDatePicker = function () {
   
	$(".datePicker").datepicker({
		dateFormat: "dd/mm/yy",
		showOn: "focus"
		
	});

   
	
	jQuery.datepicker.dpDiv.appendTo(jQuery('body'));
   
}

//example Ajax Call Sequence
RemoveJQUIDatepicker();
	$.ajax({

		url: initURL,
		type: "Get",
		success: function (data) {
			
			SetJQUIDatePicker();
		  //Do Something
			

		},
		error: function () {
			//Do Something
			SetJQUIDatePicker();

		}


	});

Answer 2

我只是愚蠢，愚蠢，愚蠢。我刚刚做了几乎相同的事情。

这是一个范围/上下文问题。一旦你进入每个函数，你就会失去该函数的 $(this) 上下文，即 $(this) 现在指的是函数而不是选择器返回的对象。

幸运的是，'.each()' 能够帮助您将各个对象传递给函数。

$.ajax({
    url:        'patchdef.php',
    type:       "GET",
    dataType:   "html",
    beforeSend: function()
    {
        // LOADING
    },
    success:    function( data ) {
        area.html(data);
        $(".datePickerPatchDef").each(function (key, PatchDef) {
            var dateFormat = $(PatchDef).attr("dateFormatPatchDef").toLowerCase();
            $(PatchDef).datepicker({
                dateFormat: dateFormat,
                changeMonth: true,
                changeYear: true
            });
        });
    }
});

我 95% 确信这对您有用。我也赞成你的问题，让它洗一下:)

编辑：我认为您可以将其保留在 index.aspx 中