datetimepicker.js加载到div中时最初不在DOM中的错误

By simon at 2018-02-07 • 0人收藏 • 55人看过

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

Uncaught TypeError:Canno读取未定义的属性“allowTimes” 演示

$(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元素正确加载,但从第二次向上 它开始安宁克错误。

2 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

您需要使用[* complete *](http://api.jquery.com/show/)参数 节目的功能填充输入字段o该领域是 完全显示在应用datetimepicker之前,看下面的demo和几个 如果你使用的东西像direction这样的动画选项 或者任何其他那么最好使用里面的duration一起 OPTIOns而不是作为参数发送到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>

2018-02-07   #2

您需要使用[* complete *](http://api.jquery.com/show/)参数 节目的功能填充输入字段o该领域是 完全显示在应用datetimepicker之前,看下面的demo和几个 如果你使用的东西像direction这样的动画选项 或者任何其他那么最好使用里面的duration一起 OPTIOns而不是作为参数发送到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>

登录后方可回帖

Loading...