jquery timepicker cdnjs.cloudflare 不起作用

Question

我在我的页面上运行此时间选择器 ( http://timepicker.co/ ) 时遇到问题。

我脑子里有这个

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

我的脚本中有这个

var hDeb = document.createElement("input"); 
hDeb.className = "hDeb timepicker";

这在下面的另一个脚本中

$(document).ready(function() {
        $('.timepicker').timepicker({});
    });

没有显示错误，但输入的只是一个输入文本

Answer 1

您需要将 input 附加到 DOM 中的元素，以便在其上初始化时间选择器。试试这个:

var hDeb = document.createElement("input");
hDeb.className = "hDeb timepicker";
document.body.appendChild(hDeb); // add this line

$(document).ready(function() {
  $('.timepicker').timepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

或者，您也可以纯粹使用 jQuery 来实现:

$(document).ready(function() {
  $('<input type="text" class="hDeb timepicker" />').appendTo('body').timepicker();
});