将日期选择器添加到动态添加的 HTML div答案

【问题标题】：Adding datepicker to dynamically added HTML divs将日期选择器添加到动态添加的 HTML div
【发布时间】：2014-09-11 09:28:14
【问题描述】：

我正在创建一个 HTML 文件，其中包含一个用于动态添加新 div 的按钮。一个 div 有一个标签和两个输入字段。其中一个输入字段分配有 JQuery 日期选择器。

我创建了两个额外的 div，但它们使用 CSS 隐藏。其中一个 div 用于使用 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>

问题是

创建并放置第一个克隆（在本例中为付款编号：3）后，当我单击输入字段输入日期时，尽管显示了日历，但我无法在此处输入日期。
一旦我创建了第二个克隆（在本例中为付款编号：4），在前面步骤中选择的日期已被放置在该字段中。
在上述步骤后克隆的所有其他 div 采用与前面步骤中选择的相同日期。

如果您愿意运行我的代码，您就会发现问题所在。描述它们有点困难。

您能否指出我的代码中的错误以及如何纠正它。

【问题讨论】：

标签： javascript jquery html datepicker

【解决方案1】：

问题在于，当您克隆日期选择器时，关闭时引用的是原始日期，因此如果您更改日期，原始日期将更新。

我用这个解决了你的问题：

    <!-- 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();    
}

一个一个地初始化每个日期选择器。

在这里你可以工作了：

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

问候

【讨论】：