javascript - Trigger jQuery datetimepicker on dynamic content -

i using datetimepicker: https://github.com/xdan/datetimepicker

i have form users can dynamically add more fields. haven't been able find way datetimepicker show on dynamically-added fields.

here js bin: http://jsbin.com/coxafodace/1/edit?html,js,output

i have tried using live() , onclick() , whole bunch of other things, datetimepicker appears on last non-dynamic form field, never on newly-created form field.

so can trigger datatimepicker on dynamic fields?

it because cloning last repeated item has same events, same everything. better way make template with:

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

and in javascript append new instance , initialize datepicker on new html.

var repeatingtemplate = $('#date-time-template').html();  jquery('.repeat').click(function(e){       e.preventdefault();      //creates new jquery object of same html     var $repeating = $(repeatingtemplate);     var lastrepeatinggroup = jquery('.repeating').last();      //places new line after last 1     lastrepeatinggroup.after($repeating);      //binds datetime events 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 updated jsbin