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

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