Javascript JQuery datepicker方法不适用于重复元素_Javascript_Jquery_Html_Calendar_Datepicker

Javascript JQuery datepicker方法不适用于重复元素

javascript jquery html calendar

Javascript JQuery datepicker方法不适用于重复元素,javascript,jquery,html,calendar,datepicker,Javascript,Jquery,Html,Calendar,Datepicker,我正在尝试使用JQuery教程指定的日期选择器添加日历对象。这是一个事件表单，我需要添加更多的事件来选择不同的事件日期，所以我要做的是复制表单中的元素以重用。这意味着日历输入标记也会被复制。但是，在执行此操作时，calendar datepicker方法将不会调用（或者至少不会弹出日历）。为什么会发生这种情况？我这里有代码： <html> <head> <title>Calendar duplicate testing</titl

我正在尝试使用JQuery教程指定的日期选择器添加日历对象。这是一个事件表单，我需要添加更多的事件来选择不同的事件日期，所以我要做的是复制表单中的元素以重用。这意味着日历输入标记也会被复制。但是，在执行此操作时，calendar datepicker方法将不会调用（或者至少不会弹出日历）。为什么会发生这种情况？我这里有代码：

<html>
    <head>
        <title>Calendar duplicate testing</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
        <script>
            $(function() {
                $( ".cal" ).datepicker();
            });

            function duplicateCalendar() {
                var calendars = document.getElementsByClassName("calendarinstance");
                var newcalendar = calendars[calendars.length - 1].cloneNode(true);
                calendars[calendars.length - 1].appendChild(newcalendar);
            }
        </script>
    </head>
    <body>
        <button type="button" onclick="duplicateCalendar();">Duplicate Calendar</button>
        <br><br>
        <div class="calendarinstance">
            <img src="calendar.png" alt="">&nbsp;&nbsp;Select Date: <input class="cal" type="text">
            <br>
            <hr>
            <br>
        <div>
    </body>
</html>


日历重复测试
$（函数（）{
$（“.cal”）.datepicker（）；
});
函数duplicateCalendar（）{
var calendars=document.getElementsByClassName（“calendarinstance”）；
var newcalendar=calendars[calendars.length-1].cloneNode（true）；
日历[calendars.length-1].appendChild（newcalendar）；
}
复制日历



选择日期：

您可以在单击时看到此代码。我只是把日历对象，因为它是一个不工作的东西。提前感谢您对任何人的帮助

jQuery选择器

$（“.cal”）.datepicker（）将仅选择同名多个类的第一个实例
看一看所有的课程
在duplicateCalendar（）上调用此函数以及现有代码：
$(function() {
    $( ".cal" ).each(function() {
        $( this ).datepicker();
    });
});

试试这个例子
<html>
<head>
    <title>Calendar duplicate testing</title>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body>
    <div class="calendarinstance">
        Select Date: <input class="cal" id="cal" type="text" />

        <input type="button" id="btClone" value="Clone it" style="float:right;" />
    </div>
</body>


日历重复测试
选择日期：

脚本
<script>

    $(document).ready(function () {
        $("#cal").datepicker();

        var iCnt = 1;

        $('#btClone').on('click', function () {

            $('#cal')
            .clone(false)
            .attr('id', 'cal' + iCnt)
            .attr('class', 'cal')
            .datepicker()
            .appendTo(".calendarinstance");

            iCnt = iCnt + 1;
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#cal”）.datepicker（）；
var-iCnt=1；
$（'#btClone'）。在（'click'，函数（）{
$（“#cal”）
.clone（错误）
.attr（'id'，'cal'+iCnt）
.attr（'class'，'cal'）
.datepicker（）
.appendTo（“.calendarinstance”）；
iCnt=iCnt+1；
});
});

我们正在使用JQuery.clone（）。此外，我们还需要为每个新元素附加“datepicker（）”方法。阅读更多关于