Question

我正在做一个允许用户将N个日期列入黑名单的任务，当检测到单击事件时，我正在使用clone（true）函数。日期选择器仅适用于原始的“ date-holder”（当我单击任何克隆的div上的日历图标时），它将为原始div打开日期时间选择器。有什么想法吗？

图像演示了当前的问题-我单击了克隆的左下方行中的日历-但它打开了原始的左上方输入。

Image of issue

<div class="date-holder">
  From
   <div class="col-sm-6" style="margin-top: 3.5px; margin-bottom: 3.5px;">
      <div class='input-group date datetimepicker'>
          <input type='text' class="form-control"/>
             <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
             </span>
     </div>
</div>
<div class="date-holder">
    To
   <div class="col-sm-6" style="margin-top: 3.5px; margin-bottom: 3.5px;">
      <div class='input-group date datetimepicker'>
          <input type='text' class="form-control"/>
             <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
             </span>
     </div>
</div>


$(document).ready(function(){
    $(".datetimepicker").datetimepicker();

    $("#addDate").click(function () {
        $(".date-holder:first").clone(true).insertBefore("#addDateHolder");
    });
});

Answer 1

clone(true)或普通Java语言cloneNode(true)仅复制元素，而不会复制事件。因此，如果要创建克隆，请确保随后添加事件。

签出cloneNode

Answer 2

销毁每次点击并重新设置日期选择器

$("#addDate").click(function () {
        $(".datetimepicker").destroy()
        $(".date-holder:first").clone(true).insertBefore("#addDateHolder");
        $(".datetimepicker").datetimepicker();
    });

克隆函数导致带有datetimepicker的奇怪事件行为

2 个答案: