Trigger jQuery datetimepicker on dynamic content

Question

I am using this datetimepicker: https://github.com/xdan/datetimepicker

I have a form where users can dynamically add more fields. I haven't been able to find a way to get the datetimepicker to show on the dynamically-added fields.

Here is a JS Bin: http://jsbin.com/coxafodace/1/edit?html,js,output

I have tried using live() and onclick() and a whole bunch of other things, but the datetimepicker always appears on the last non-dynamic form field, never on the newly-created form field.

So what can I do to trigger the datatimepicker on the dynamic fields?

Answer 1

It is because you are cloning the last repeated item so it has the same events, same everything. A better way to do it is to make a template with:

<script type="text/template" id="date-time-template">
    //repeated html goes in here
</script>

And then in your javascript append a new instance and initialize the datepicker on the NEW html.

var repeatingTemplate = $('#date-time-template').html();

jQuery('.repeat').click(function(e){  
    e.preventDefault();

    //Creates a NEW jquery object of the same html
    var $repeating = $(repeatingTemplate);
    var lastRepeatingGroup = jQuery('.repeating').last();

    //places the new line after the last one
    lastRepeatingGroup.after($repeating);

    //binds the datetime events to the newly added line
    $repeating.find('.starttime').datetimepicker({
        datepicker:false,
        // mask: true,
        format:'H:i',
        step: 15,
    });

    $repeating.find('.endtime').datetimepicker({
        datepicker:false,
        // mask: true,
        format:'H:i',
        step: 15,
    });
});

Here is an updated jsbin