jquery 时间选择器 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

尝试替换

$('.timepicker').timepicker({});

由此

$('.timepicker').timepicker();

Answer 2

您需要将 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();
});

Answer 3

如果您尝试在添加 <input class="timepicker"> 之前初始化 timepicker，那么您的 $('.timepicker') select 或 return 元素将变为零，并且没有任何效果，您可以请参阅下一个片段：

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

<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>

您需要先添加输入，然后才select它并初始化时间选择器：

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

<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 时间选择器 cdnjs.cloudflare 不起作用

jquery timepicker cdnjs.cloudflare does not work

jquery

timepicker