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

【问题标题】：JQuery datepicker method not working on duplicate elementJQuery datepicker方法不适用于重复元素
【发布时间】：2014-11-12 00:56:42
【问题描述】：

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

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

您可以点击here 看到此代码。我只放置日历对象，因为它是一件事不起作用。提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery html calendar datepicker

【解决方案1】：

jQuery 选择器$( ".cal" ).datepicker(); 只会选择多个同名类的第一个实例。

查看.each() 以了解所有课程。

在 duplicateCalendar() 上调用此函数以及现有代码：

$(function() {
    $( ".cal" ).each(function() {
        $( this ).datepicker();
    });
});

【讨论】：

【解决方案2】：

试试这个例子。

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

我们正在使用 JQuery .clone()。此外，我们需要为每个新元素附加“datepicker()”方法。阅读有关.clone() method 的更多信息。

【讨论】：