如何在动态创建的 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"      
    });

});

由这样的 link 加载的外部页面：

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

它只有一个表格 select 或更正日期：

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

Answer 2

问题是子页面无法重新加载 jquery.js 和 jquery-ui.js。所以这是我的解决方案：

index.html

<html>
    <head>
    <script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.js"></script>
    <script type="text/javascript">
    $(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"      
        });            
    });
    </script>
  </head>
<body>

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

</body>
</html>

input.html

<html>
    <head>
    <!-- Don't load jquery and jquery-ui again!!! -->
    <script type="text/javascript">
       $( ".datepicker" ).datepicker({            
            dateFormat: "yy-mm-dd"      
       });
    </script>
</head>
<body>

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

</body>
</html>

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

How to use datepicker in dynamically created jQuery UI dialog?

javascript

jquery

dialog

jquery-ui

datepicker