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

时间：2022-11-29 23:35:28

I have to use datepicker in wordpress site, in which a plugin creates fields dynamically with same name(array), same #id and same .class i try to use it using focus but i got error on it

我必须在wordpress网站中使用datepicker,其中插件使用相同的名称(数组)动态创建字段,相同的#id和相同的.class我尝试使用焦点使用它但我得到它的错误

TypeError: inst is undefined

Please hel

   <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>

1 个解决方案

#1

6  

you have id="datepicker" for all your datepicker inputs, but ids are supposed to be unique in a given DOM. use class="datepicker" instead. and also, since you're using jquery anyways, you dont need to use vanilla javascript onclick function.

对于所有的日期选择器输入,你有id =“datepicker”,但是在给定的DOM中,id应该是唯一的。请改用class =“datepicker”。而且,既然你正在使用jquery,你也不需要使用vanilla javascript onclick函数。

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

#1

6  

you have id="datepicker" for all your datepicker inputs, but ids are supposed to be unique in a given DOM. use class="datepicker" instead. and also, since you're using jquery anyways, you dont need to use vanilla javascript onclick function.

对于所有的日期选择器输入,你有id =“datepicker”,但是在给定的DOM中,id应该是唯一的。请改用class =“datepicker”。而且,既然你正在使用jquery,你也不需要使用vanilla javascript onclick函数。

demo: 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();
    });
});
标签：

相关文章