Question

所以我正在尝试克隆一个包含斑马线日期选择器的div。不幸的是，该图标在每个克隆上一直向左滑动。

运行下面的代码段，然后单击克隆几次以获取示例

$(document).ready(function() {

  // assuming the controls you want to attach the plugin to
  // have the "datepicker" class set
  $('input.datepicker').Zebra_DatePicker();

  $('#container').on('click', '.clonebtn', function() {
    const myTemplate = $(this).closest('.cloneMe');
    const clonedTemplate = myTemplate.clone();
    clonedTemplate.find('.Zebra_DatePicker_Icon').remove();
    $('#container').append(clonedTemplate);
    let datepicker = clonedTemplate.find('input.datepicker');
    datepicker.Zebra_DatePicker();
  });

});

<link href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/zebra_datepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js"></script>

<div id="container">
  <div class="cloneMe" style="border:1px solid black;">
    <div style="padding: 10px;">
      <input class="datepicker" type="text" />
    </div>
    <button class="clonebtn">
  clone me
</button>
  </div>
</div>

Answer 1

问题是您正在克隆一个已修改的DOM，该DOM具有许多已经与zebra一起添加的内联样式。一个想法是在克隆过程中删除所有内联样式，并且每次都将获得相同的布局：

$(document).ready(function() {

  // assuming the controls you want to attach the plugin to
  // have the "datepicker" class set
  $('input.datepicker').Zebra_DatePicker();

  $('#container').on('click', '.clonebtn', function() {
    const myTemplate = $(this).closest('.cloneMe');
    const clonedTemplate = myTemplate.clone();
    clonedTemplate.find('.Zebra_DatePicker_Icon').remove();
    clonedTemplate.find('*').removeAttr('style'); /* Added this */
    $('#container').append(clonedTemplate);
    let datepicker = clonedTemplate.find('input.datepicker');
    datepicker.Zebra_DatePicker();
  });

});

.cloneMe {
 border:1px solid black;
}
.cloneMe > div {
 padding: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/zebra_datepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js"></script>

<div id="container">
  <div class="cloneMe" >
    <div >
      <input class="datepicker" type="text" >
    </div>
    <button class="clonebtn">
  clone me
</button>
  </div>
</div>

克隆斑马线日期选择器移动图标

1 个答案: