如何在动态创建的 jQuery UI 对话框中使用 datepicker？答案

【问题标题】：How to use datepicker in dynamically created jQuery UI dialog?如何在动态创建的 jQuery UI 对话框中使用 datepicker？
【发布时间】：2015-05-31 22:51:42
【问题描述】：

我无法在动态创建的 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>

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

【问题讨论】：

在 load() 调用成功时实例化日期选择器。
Thx，基本上这也可以，但我的错误是我在子页面上重新加载了 jquery 和 jquery-ui ...这以某种方式阻止了 datepicker()。

标签： javascript jquery jquery-ui datepicker dialog

【解决方案1】：

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

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

【讨论】：

其实我之前试过了，这不是问题。问题是，子页面还加载了 jquery.js 和 jquery-ui.js 以某种方式阻止了 datepicker。

【解决方案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>

【讨论】：