Добавление средства выбора даты к динамически добавляемым элементам HTML div

Я создаю файл HTML, в котором есть кнопка для динамического добавления новых div. div имеет метку и два поля ввода. Одному из полей ввода назначено средство выбора даты JQuery.

У меня есть два дополнительных div, но они скрыты с помощью CSS. Один из них используется для создания его клонов с помощью JQuery. Я делаю клоны этого div для динамического добавления при нажатии кнопки. Другой div используется для правильного размещения динамически созданных div. Это означает, что все элементы div, генерируемые динамически, размещаются перед этим.

Это мой код.

 <!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- for date picker -->

        <!-- Load jQuery from Google's CDN -->
        <!-- Load jQuery UI CSS  -->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

        <!-- Load jQuery JS -->
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <!-- Load jQuery UI Main JS  -->
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


        <script>
            $(function() {
                $(".dpick").datepicker();
            });
        </script>

        <!-- /for date picker -->

    </head>
    <body>
        <div id="onBookingDiv">
            <label id="Paylbl0">Payment No 0: </label>
            <input type="text"  style="width: 30%;" class="dpick" id="dpick0" > 
            <input type="number" style="width: 30%;" id="amount0">
        </div>
        <div id="Pay1Div">
            <label id="Paylbl1">Payment No 1: </label>
            <input type="text"  style="width: 30%;" class="dpick" id="dpick1"> 
            <input type="number" style="width: 30%;" id="amount1">
        </div>
        <div id="Pay2Div">
            <label id="Paylbl2">Payment No 2: </label>
            <input type="text"  style="width: 30%;" class="dpick" id="dpick2"> 
            <input type="number" style="width: 30%;" id="amount2">
            <button type="button" onclick="AddNew()">Add New</button>
        </div>

        <!-- this div is used to correctly place the cloned div -->

        <div id="placeDiv" style="display: none">
            <label>Plcment No x: </label>
            <input type="text"  style="width: 30%;" class="dpick"> 
            <input type="number" style="width: 30%;" >
        </div>

        <!-- /this div is used to correctly place the cloned div -->

        <!-- this div is used to make the clone -->

        <div id="makeCloneID" class="makeCloneClass" style="display: none">
            <label class="lbl">Payment No x: </label>
            <input type="text"  style="width: 30%;" class="dpick"> 
            <input type="number" style="width: 30%;">
        </div>

        <!-- /this div is used to make the clone -->


        <script>
            var i = 3;
            function AddNew() {

                var cloned = $('#makeCloneID').clone(true);
                cloned.css({"display": 'block'});

                var noOfDivs = $('.makeCloneClass').length + 2;

                cloned.attr('id', 'Pay' + noOfDivs + 'Div');
                cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
                cloned.find('input[type="text"]').attr('id', 'dpick'+ noOfDivs);
                cloned.find('input[type="number"]').attr('id', 'amount'+ noOfDivs);

                cloned.find('.lbl').html("Payment No " + i++ + ':');

                cloned.insertBefore("#placeDiv");
            }
        </script>


    </body>
</html>

Проблемы

  1. После создания и размещения первого клона (в данном случае «Платеж № 3»), когда я щелкаю поле ввода, чтобы ввести дату, я не могу ввести дату, хотя календарь отображается.

  2. Когда я создаю второй клон (в данном случае платеж № 4), день, который был выбран на предыдущем шаге, уже помещается в поле.

  3. Все остальные элементы div, клонированные после описанных выше шагов, имеют ту же дату, которая была выбрана на предыдущем шаге.

Если вы можете быть достаточно любезны, чтобы запустить мой код, вы увидите, в чем заключаются проблемы. Немного сложно их описать.

Не могли бы вы указать, в чем ошибка в моем коде и как ее исправить.


javascript html datepicker jquery
person vigamage    schedule 11.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

проблема в том, что когда вы клонируете средство выбора даты, закрытие ссылается на оригинал, поэтому, если вы измените дату, дата на оригинале будет обновлена.

Я решил вашу проблему с этим:

    <!-- this div is used to make the clone -->

    <div id="makeCloneID" class="makeCloneClass" style="display:none;">
        <label class="lbl">Payment No x: </label>
        <input type="text" class="dontUseDPickClass" style="width: 30%;"> 
        <input type="number" style="width: 30%;">
    </div>

    <!-- /this div is used to make the clone -->

посмотрите на class="dontUseDPickClass", чтобы он не инициализировал средство выбора даты из клонируемого, а затем:

function AddNew() {
    var cloned = $('#makeCloneID').clone(true);
    cloned.css({"display": 'block'});

    var noOfDivs = $('.makeCloneClass').length + 2;

    cloned.attr('id', 'Pay' + noOfDivs + 'Div');
    cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
    cloned.find('input[type="text"]').attr('id', 'dpick'+ noOfDivs);
    cloned.find('input[type="number"]').attr('id', 'amount'+ noOfDivs);    
    cloned.find('.lbl').html("Payment No " + i++ + ':');


    cloned.insertBefore("#placeDiv");

    //Init the datepicker:
    $('#dpick'+ noOfDivs).datepicker();    
}

Инициализируйте каждый datepicker один за другим.

Вот у вас работает:

http://jsfiddle.net/1ezos4ho/1/

С Уважением

person Manjar    schedule 11.09.2014