在动态创建的字段上使用 JQuery Datepicker答案

【问题标题】：Use JQuery Datepicker on dynamically created fields在动态创建的字段上使用 JQuery Datepicker
【发布时间】：2015-09-21 11:40:08
【问题描述】：

我必须在 wordpress 站点中使用 datepicker，其中一个插件动态创建具有相同名称（数组）、相同 #id 和相同 .class 的字段我尝试使用焦点来使用它，但我得到了错误

TypeError: inst is undefined

请帮忙

   <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="assests/jquery-ui.min.css" rel="stylesheet">
            <script src="assests/jquery.js"></script>
            <script src="assests/jquery-ui.js"></script>
        </head>
        <body>
            <div class="mytemplate" style="display: none;">
                <input id="datepicker" type="text" name="name[]">
            </div>
            <div class="dates">
            <div>
                <input id="datepicker" type="text" name="name[]">
            </div>
            </div>
            <input type="button" value="Add more" onclick="myfunction()">
            <script>
                function myfunction() {
                    $(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");
                }
            </script>
            <script>
                $(document).on("focus", "#datepicker", function(){
                    $(this).datepicker();
                });
            </script>
        </body>
    </html>

【问题讨论】：

您在任何时候都只能在页面上拥有一个 datepicker 的 ID（或任何东西）。您当前的选择器将它们全部选中。
您应该能够使用模板引擎自定义 id 或其他属性。此外，您应该能够找到一种方法来访问通过模板引擎绑定到 DOM 的每个项目。如果没有，请选择另一个插件。

标签： jquery jquery-ui wordpress jquery-ui-datepicker

【解决方案1】：

您的所有日期选择器输入都有 id="datepicker"，但在给定的 DOM 中，id 应该是唯一的。请改用class="datepicker"。而且，由于您无论如何都在使用 jquery，所以您不需要使用 vanilla javascript onclick 函数。

演示：http://jsfiddle.net/swm53ran/331/

<div class="mytemplate" style="display: none;">
    <input class="datepicker" type="text" name="name[]"/>
</div>
<div class="dates">
    <div>
        <input class="datepicker" type="text" name="name[]"/>
    </div>
</div>
<input type="button" class="addmore" value="Add more">

$(document).ready(function() {
    $('.addmore').on('click', function() {
        $(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");
    });
    $(document).on("focus", ".datepicker", function(){
        $(this).datepicker();
    });
});

【讨论】：