Why initialize the jQuery in $.ajax() success when adding fields?

Question

I am using a jQuery datepicker on .datepickerTime and .datePickerDate classes.

$('.datepickerTime').datetimepicker({
    'timepicker': false,
    'mask': false,
    'format': 'M d,Y',
    'minDate': 0,
    'scrollMonth': false,
    'scrollInput': false,
    'allowTimes': [ '00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30' ]
});

When the page is loaded all datepickers work on the basis of classes. But when I added new field to my form having the datepicker class, then date picker does not work on it.

I have got the solution that I have to initialize the jquery again with ajax success .

I am confused why we need to initialize datepicker on AJAX success as we already have that jQuery on our page?

I am new to jquery and want to correct my basic concepts :-) , Thanks in advance.

Answer 1

You need to re-initialize your datepicker on ajax-success because the element will be added to DOM after you have initialized the plugin. You will have 2 options here.

• Either re-initialize inside ajax-success or
• Initialize it on document or body or any element which will be parent of your datepicker element and which will be there on initial DOM load.

For your 2nd method, below is the

$('body').on('focus',".datepickerTime", function(){
    $(this).datetimepicker({
       'timepicker': false,
       'mask': false,
       'format': 'M d,Y',
       'minDate': 0,
       'scrollMonth': false,
       'scrollInput': false,
       'allowTimes': [ '00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30' ]
   });
});

​

Answer 2

you should add new class or id for new element and call datetimepicker for your new element to init