jquery timepicker cdnjs.cloudflare does not work

Question

i have a problem to run this timepicker (http://timepicker.co/) on my page.

I have this in the head

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

I have this in my script

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

And this in a other script below

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

There is no error displayed, but the input is just an input text

Answer 1

If you try initializing timepicker before you add <input class="timepicker">, then your $('.timepicker') selector will return zero elements, and nothing'll work, as you can see in next snippet:

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

You need to add input first, only then select it and initialize timepicker:

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