JQuery问题的Datepicker和clone函数？

Question

这是来自js的部分，它执行克隆工作。

$(document).on("click", ".adauga_incasare", function () {
    $('.incasari:last').clone(true).insertAfter('.incasari:last');
    $(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
    $(".incasari:last").find(".suma_incasare_container label b").remove();
    $(".coscos").css("padding-top", "4px");
    $(".incasari:first").find(".coscos").css("padding-top", "20px");)
};

这是html代码：

<div class="incasari first hasData">
    <div class="data_incasare_container">
        <label><b>Data</b>
        </label>
        <input class="data_incasare datepicker_incasare" name="data_incasare" type="text">
        <label class="data_incasare_hidden">
            <?php echo $value->date; ?></label>
    </div>
    <div class="suma_incasare_container">
        <label><b>Suma</b>
        </label>
        <input class="suma_incasare" type="text" maxlength="8" name="suma_incasare">
        <label class="suma_incasare_hidden">
            <?php echo $value->received; ?></label>
    </div>
    <div class="coscos"> <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash sterge_incasare" id = "<?php  echo $value->id; ?>"></i></a>

        <div style="clear:both;"></div>
        <div class="incasare_action">
            <input class="btn btn-success salveaza_incasare" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input> <a href="javascript:void(0);" class="del_incasare delrow"></a>

        </div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>
<div style="clear:both;"></div> <a href="#" class="adauga_incasare">+ Adauga incasare noua</a>

以及来自datepicker的代码：

$('.datepicker_incasare').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    minDate: "-2Y",
    maxDate: "+2Y"
});

当我按下一个执行克隆操作的按钮时会出现问题，之后日期选择器对输入无效。

在下图中，您可以看到结果：

当我保存新行并刷新页面时，它可以正常工作。但克隆后它不起作用。

我该怎么办？ THX

这个脚本：

$foo =  $('.incasari:last').clone(true).insertAfter('.incasari:last');
                            $(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
                            $(".incasari:last").find(".suma_incasare_container label b").remove();
                            $(".coscos").css("padding-top", "4px");
                            $(".incasari:first").find(".coscos").css("padding-top", "20px");
                            $foo.datepicker({
                               changeMonth: true,
                               changeYear: true,
                               dateFormat: 'yy-mm-dd',
                               minDate: "-2Y",
                               maxDate: "+2Y"
                          });

这是结果：

Answer 1

你必须通过simpy初始化克隆的datepicker将调用放入你的点击处理程序

$(document).on("click", ".adauga_incasare", function () {
   $foo =  $('.incasari:last').clone(true).insertAfter('.incasari:last');
    $(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
    $(".incasari:last").find(".suma_incasare_container label b").remove();
    $(".coscos").css("padding-top", "4px");
    $(".incasari:first").find(".coscos").css("padding-top", "20px");)
    $foo.datepicker({
       changeMonth: true,
       changeYear: true,
       dateFormat: 'yy-mm-dd',
       minDate: "-2Y",
       maxDate: "+2Y"
  });
};

Answer 2

在我的评论中，你需要在插入后绑定。

$(document).on("click", ".adauga_incasare", function () {
    $foo =  $('.incasari:last').clone(true).insertAfter('.incasari:last');
    $(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
    $(".incasari:last").find(".suma_incasare_container label b").remove();
    $(".coscos").css("padding-top", "4px");
    $(".incasari:first").find(".coscos").css("padding-top", "20px");)
    $foo.datepicker({  //really this should be just the init executed in a callback
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      minDate: "-2Y",
      maxDate: "+2Y"
    });
};

function initDatePicker(){
    $('.datepicker_incasari').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    minDate: "-2Y",
    maxDate: "+2Y"
    });
}

然后在您的文档中加载调用initDatePicker进行首次初始化

$(function() {
  initDatePicker();
});