Jquery timePicker for clone

Question

I have a jQuery TimePicker. It is working fine, but when I clone the row it only works on the first row but not on the cloned rows.

This is the code :

<script>
    $(function() {
        $('#timePicker').timepicker({ 'timeFormat': 'H:i' });
    });
</script>       

<input id="timePicker" name = "time[]" type="text" class="time" />

I think it is using the id to call the function. Any other better way ?

Answer 1

When you clone the row, initialize also the second timepicker.

This could create a problem though with the code you have right now because you will have a duplicate id in your DOM. So I suggest you change the id to class and when you duplicate the row you call this:

$('.timePicker').timepicker({ 'timeFormat': 'H:i' });

Or just remove the id of your input field and use this:

$('.time').timepicker({ 'timeFormat': 'H:i' });

Answer 2

that is because... when timepicker is called .. the cloned elements is not present in the document thus won't be able to find and add timepicker to it..call timepicker again after the cloned element is appended to the document.

try this

<script>
  $(function() {
    $('.time').timepicker({ 'timeFormat': 'H:i' });
    //-^---here using class selector

    //your codes to append the cloned element.

     $('.time').timepicker({ 'timeFormat': 'H:i' }); //call again
     //-^---here using class selector
 });
</script>

NOTE: make sure you use class beacuse cloning the elements will end up with having two elements with same id which is invalid.. so i am using class here