jQuery Dialog 和 Datepicker 插件不能一起工作

Question

我有两个页面，一页是 mange.aspx，另一页是 pop-up.aspx 在 mange.aspx 我用 ajax 加载另一个页面并将其显示在jquery ui Dialog

我的问题是当我加载页面时，该页面内的jquery ui Datepicker 无法正常工作

这是我的代码

$(function () {
     $("#datepicker").datepicker({
         showOn: "button",
         buttonImage: "../images/calendar-icon.png",
         buttonImageOnly: true
     });

     $('#Add').click(function () {
         var $dialog = $('<div id="MyDialog"></div').appendTo('body')
      .load("../Pop-up.aspx #pop-up")
      .dialog({
         position: 'center',
         width: 550 
           // code .....
      });
   });
});

Answer 1

您需要在加载弹出窗口之后创建日期选择器。之前创建日期选择器不会做任何事情。

function createDatePicker() {
    $("#datepicker").datepicker({
        showOn: "button",
        buttonImage: "../images/calendar-icon.png",
        buttonImageOnly: true
    });
}

$(function () {
    $('#Add').click(function () {
        var $dialog = $('<div id="MyDialog"></div').appendTo('body')
          .load("../Pop-up.aspx #pop-up", createDatePicker)
          .dialog({
             position: 'center',
             width: 550 
          });
        // code .....
    });
});

您的日期选择器创建代码现在位于其自己的函数中，并在加载弹出页面时设置为回调。这样，日期选择器将在页面加载后立即创建。