JQuery datepicker method not working on duplicate

2019-08-10 20:45发布

站内问答 / JavaScript
369 2 4

I'm trying to add a calendar object using the datepicker as specified by JQuery tutorials. This is for an event form, and I need to add more events to select different event dates, so what I do is duplicate the elements within the form to reuse. This means the calendar input tag also gets duplicated. But, upon doing this, the calendar datepicker method will not call (or at least, it won't pop up the calendar). Why does this happen? I have the code right here:

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

You can see this code clicking here. I'm only putting the calendar object as it is the one thing that doesn't work. Thank you in advance for anyone's help!

2条回答
走好不送
2楼-- · 2019-08-10 21:27

Try this example.

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

The Script

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

We are using JQuery .clone(). Also, we need to attach “datepicker()” method with every new element. Read more about .clone() method.

查看更多
0人赞 添加讨论(0) 举报
Anthone
3楼-- · 2019-08-10 21:30

The jQuery selector $( ".cal" ).datepicker(); will only select the first instance of multiple classes of the same name.

Take a look at .each() to reach all classes.

Call this function on duplicateCalendar() along with the existing code:

$(function() {
    $( ".cal" ).each(function() {
        $( this ).datepicker();
    });
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)