在动态创建的字段上使用JQuery日期选择器_Jquery_Jquery Ui_Wordpress_Jquery Ui Datepicker

在动态创建的字段上使用JQuery日期选择器

jquery jquery-ui wordpress

在动态创建的字段上使用JQuery日期选择器,jquery,jquery-ui,wordpress,jquery-ui-datepicker,Jquery,Jquery Ui,Wordpress,Jquery Ui Datepicker,我必须在wordpress站点中使用datepicker，在该站点中，插件动态创建具有相同名称（数组）、相同#id和相同类的字段。我尝试使用focus来使用它，但出现了错误 TypeError: inst is undefined 请帮忙 <html> <head> <title>TODO supply a title</title> <meta charset="UTF

我必须在wordpress站点中使用datepicker，在该站点中，插件动态创建具有相同名称（数组）、相同#id和相同类的字段。我尝试使用focus来使用它，但出现了错误

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>


提供头衔
函数myfunction（）{
$（.mytemplate”）.clone（）.removeClass（“mytemplate”）.show（）.appendTo（.dates”）；
}
$（document）.on（“焦点”，“日期选择器”，函数（）{
$（this.datepicker（）；
});

对于所有的日期选择器输入，您都有

id=“datepicker”

，但是id在给定的DOM中应该是唯一的。改用

class=“datepicker”

。而且，由于您使用的是jquery，因此不需要使用普通的javascript

onclick

函数

演示：


$（文档）.ready（函数（）{
$（'.addmore'）。在（'click'，function（）上{
$（.mytemplate”）.clone（）.removeClass（“mytemplate”）.show（）.appendTo（.dates”）；
});
$（document）.on（“focus”，“.datepicker”，function（））{
$（this.datepicker（）；
});
});

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

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