在动态创建的字段上使用 JQuery Datepicker [英] Use JQuery Datepicker on dynamically created fields

查看：25
本文介绍了在动态创建的字段上使用 JQuery Datepicker的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

TypeError: inst 未定义

请帮忙

 <头><title>TODO 提供一个标题</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><身体><div class="mytemplate" style="display: none;"><input id="datepicker" type="text" name="name[]">

<div class="日期"><div><input id="datepicker" type="text" name="name[]">

<input type="button" value="Add more" onclick="myfunction()"><脚本>函数 myfunction() {$(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");}<脚本>$(document).on("focus", "#datepicker", function(){$(this).datepicker();});

解决方案

您有 id="datepicker" 用于所有日期选择器输入，但 id 在给定的 DOM 中应该是唯一的.使用 class="datepicker" 代替.而且，由于您无论如何都在使用 jquery，因此您不需要使用 vanilla javascript onclick 功能.

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

<div class="日期"><div><input class="datepicker" type="text" name="name[]"/>

<input type="button" class="addmore" value="添加更多">$(document).ready(function() {$('.addmore').on('click', function() {$(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");});$(document).on("focus", ".datepicker", function(){$(this).datepicker();});});

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 

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>

解决方案

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.

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

这篇关于在动态创建的字段上使用 JQuery Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆