DatePicker not working in ajax loaded page

Question

I attach the datepicker to inputs in a global script file with like this:

$(document).on(\"focusin\",\".datePick\", function () {
            $(this).datepic         


        

Answer 1

I experienced this exact error, and while my answer will not help the OP, maybe it will help others in the future.

I received this error message when I had an ID clash with another element in my page.

Answer 2

As mentioned in my comment on TJ VanToll's answer, as long as the parent element to which your trigger is bound is present at the time the DOM is loaded, you'll be fine.

See this fiddle for an example.

JS:

$(function(){
    $(document).on("focusin",".datePick", function () {
       $(this).datepicker({
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            onClose: function () { $(this).valid(); }
        });
    });

    $('#focusin').append('<input class="datePick" name="datepicker" />');

});​

HTML:

<div id="focusin"></div>​

As long as your modal div is present on load, it should be able to capture your input after loading.

Answer 3

Using live, delegate, or on does not work with jQuery UI widgets because they are stateful plugins that must be instantiated after the necessary DOM nodes exist.

You can accomplish what you're looking for though by instantiating the datepicker after the additional markup has been injected. Here's an example doing so - http://jsfiddle.net/tj_vantoll/qN8dG/2/.