Question

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

我创建了两个额外的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>

问题是

创建并放置第一个克隆（在本例中为Payment No：3）后，当我单击输入字段输入日期时，虽然显示了日历，但我无法在那里输入日期。
创建第二个克隆（在本例中为Payment No：4）后，在前一步中选择的日期已经放入字段中。
在上述步骤之后克隆的所有其他div都采用了之前步骤中选择的相同日期。

如果您能够善于运行我的代码，您将看到问题所在。描述它们有点困难。

请指出我的代码中的错误是什么以及如何纠正错误。

Answer 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”，以便它不会从clonable初始化datepicker，然后：

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/

此致

添加datepicker以动态添加HTML div

1 个答案: