jquery datepicker for ajax content fails after first load

Question

Hi folks,

I have a script that generates a modal dialog and inside of that, I would like to put a jquery ui datepicker. I'm currently using the following code:

$('#datepicker').live('click', function() {
  $(this).datepicker({showOn:'both'}).focus();
});

Which works just fine the first time I open the dialog and click on the input box assigned the 'datepicker' id.

The problem is that after I close that dialog (which removes its markup from the DOM) and re-open it, the datepicker no longer works.

I have tried calling $('#datepicker').die() upon closing the dialog and then re-binding to the #datepicker input upon re-opening it, but that doesn't seem to work either.

I'm really stumped on this one. Any insight would be greatly appreciated.

Thanks!

Answer 1

My guess is that the removal of the triggering element from the DOM is your issue. Why not just hide your modal window and then show it when you need to? I believe that would take care of your issue.

Answer 2

Turns out, using a class instead of an ID (i.e. '.datepicker' instead of '#datepicker') fixed the issue, even though there was only ever one occurance of #datepicker on the DOM.

Even then, it only works if there's another hidden input with the .datepicker class attached.

So it was sort of a combination of both suggestions that fixed it.

Thanks to both of you for the help!