javascript - datetimepicker.js 在最初不在 DOM 中的 div 中加载时出错

Question

我正在创建一个表单并在其中使用 datetimepicker.js 。我的表单元素最初是隐藏的，当我第一次将它们加载到 DOM 中时，Datetimepicker 工作正常，但从第二次开始它开始给出错误:

Uncaught TypeError: Cannot read property 'allowTimes' of undefined

演示

$(document).on("click", ".popup-checkbox", function() {

  if ($(this).hasClass("schedule-fullday-full")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-fullday").show("drop", {
      direction: "down"
    }, 200);
    $(".schedule-start-date").datetimepicker();
  } else if ($(this).hasClass("schedule-fullday-time")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-time").show("drop", {
      direction: "down"
    }, 200);
  } else if ($(this).hasClass("schedule-fullday-repeat")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-repeat").show("drop", {
      direction: "down"
    }, 200);
  }

});

.popup-schedule-type {
  display: none;
}

.popup-checkbox {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid #222;
  cursor: pointer;
}

.popup-checkbox-boxes {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.full.min.js"></script>

<div class="popup-checkbox-boxes">
  <div class="popup-checkbox schedule-fullday-full">
    Full Day
  </div>
  <div class="popup-checkbox schedule-fullday-time">
    Time Bound
  </div>
  <div class="popup-checkbox schedule-fullday-repeat">
    Repeating
  </div>
</div>

<div class="popup-schedule-type popup-schedule-fullday">
  <div class="popup-input-holder">
    <div class="popup-input-wrap rq-input-fifty rq-with-label">
      <label class="rq-label">Order Date</label>
      <input type="text" class="rq-input schedule-start-date">
    </div>
  </div>
</div>
<div class="popup-schedule-type popup-schedule-time">
  Add Time Bound Event
</div>
<div class="popup-schedule-type popup-schedule-repeat">
  Add Repeat Event
</div>

此处 popup-schedule-type 默认情况下隐藏，并在 jQuery 调用后显示。第一次 datetimepicker 元素正确加载，但从第二次开始它开始出现错误。

Answer 1

您需要使用 complete show 的参数函数填充输入字段，以便在应用 datetimepicker 之前完全显示该字段如果您使用动画选项，请参阅下面的演示和一些内容，例如 direction或任何其他，那么最好使用 duration与选项一起放在里面，而不是作为参数发送到 show .

$(".popup-schedule-fullday").show('drop', {
      direction: 'down',
      duration: 200,
    }, function() {
      $(".schedule-start-date").datetimepicker({dateFormat: "yy-mm-dd HH:ii:ss"});
    });

$(document).on("click", ".popup-checkbox", function() {

  if ($(this).hasClass("schedule-fullday-full")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-fullday").show('drop', {
      direction: 'down',
      duration: 200,
    }, function() {
      $(".schedule-start-date").datetimepicker({
        dateFormat: "yy-mm-dd HH:ii:ss"
      });
    });

  } else if ($(this).hasClass("schedule-fullday-time")) {

    $(".popup-schedule-type").hide();

    $(".popup-schedule-time").show("drop", {
      direction: "down"
    }, 200);
  } else if ($(this).hasClass("schedule-fullday-repeat")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-repeat").show("drop", {
      direction: "down"
    }, 200);
  }

});

.popup-schedule-type {
  display: none;
}

.popup-checkbox {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid #222;
  cursor: pointer;
}

.popup-checkbox-boxes {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.full.js"></script>

<div class="popup-checkbox-boxes">
  <div class="popup-checkbox schedule-fullday-full">
    Full Day
  </div>
  <div class="popup-checkbox schedule-fullday-time">
    Time Bound
  </div>
  <div class="popup-checkbox schedule-fullday-repeat">
    Repeating
  </div>
</div>

<div class="popup-schedule-type popup-schedule-fullday">
  <div class="popup-input-holder">
    <div class="popup-input-wrap rq-input-fifty rq-with-label">
      <label class="rq-label">Order Date</label>
      <input type="text" class="rq-input schedule-start-date">
    </div>
  </div>
</div>
<div class="popup-schedule-type popup-schedule-time">
  Add Time Bound Event
</div>
<div class="popup-schedule-type popup-schedule-repeat">
  Add Repeat Event
</div>