JQuery的日期选择方法不工作的重复元素(JQuery datepicker method not

我尝试添加使用日期选择器由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>

你可以看到这个代码，点击这里。我只是把日历对象，因为它是一两件事，不工作。预先感谢您对任何人的帮助！

Answer 1:

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

看一看。每（）到达所有类。

呼吁duplicateCalendar（）与现有的代码一起这样的功能：

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

Answer 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（）。此外，我们还需要附上“日期选择器（）”方法，每一个新元素。了解更多关于.clone（）方法。

文章来源: JQuery datepicker method not working on duplicate element