javascript - 如何在动态创建的 jQuery UI 对话框中使用日期选择器？

Question

我在动态创建的 jQuery UI 对话框 () 中激活 datepicker() 时遇到问题:

index.html

$(document).ready(function() {

    var $loading = $('<img src="./images/loading.gif" alt="loading">');

    $('.page-popup').each(function() {

        var $dialog = $('<div></div>')
                .append($loading.clone());
        var $link = $(this).one('click', function() {
                $dialog
                        .load($link.attr('href'))
                        .dialog({
                                title: $link.attr('title'),
                                width: 600,
                                height: 300
                        });

                $link.click(function() {                
                        $dialog.dialog('open');

                        return false;
                });

                return false;
        });

    });

    $( ".datepicker" ).datepicker({         
            dateFormat: "yy-mm-dd"      
    });

});

通过这样的链接加载的外部页面:

<a href="input.html" title="Input" class="page-popup">Input</a>

它只有一个用于选择或更正日期的表单:

input.html

<form method="post" action="?">
    <input type="text" name="date" value="2000-01-01" class="datepicker">
    <input type="submit">
</form>

如何激活不同对话框的日期选择器？

Answer 1

在对话框的 open 事件中渲染日期选择器，如下所示。

                   $dialog
                    .load($link.attr('href'))
                    .dialog({
                            title: $link.attr('title'),
                            width: 600,
                            height: 300,
                            open: function(){
                             $( ".datepicker" ).datepicker({         
                                     dateFormat: "yy-mm-dd"      
                                  });
                             }
                    });