jquery - datepicker (colorpicker etc) on ajax loaded content

Question

Here is the thing. I have ajax loaded content (including form fields) and i need to add datepicker (colorpicker) to one of the new input fields.

Clearly $('input.datepicker').datepicker() doesn't work and .on() method doesn't seem to be working with load event.

I am not able to modify ajax handling script (so i can't add some callback - after successful ajax request). Can you provide me some advices?

Thank you very much.

Answer 1

Use the .ajaxComplete() global handler:

$(document).ajaxComplete(function(event, jqXhr, settings) {
     //maybe check whether you have to create the datePickers or not...
     $('input.datepicker').datepicker();
});

This jQuery global handler will be called whenever an AJAX request completes, regardless of which one is. You can use the parameters passed to the callback to determine the concrete request and, perhaps, whether you need to rebuild your controls.

you can read more about the jQuery ajaxComplete handler if you're interested.