I'm working with an existing system set up by someone else (no longer here). In this system, clicking on the text within a special <span> will trigger a js function which will replace the text with an <input> field. The text which was there is assigned as the value of the <input> element.

An onblur event is assigned to this new <input> field. This calls a function which updates the data in the database via an AJAX call. As part of this action, the <input> field is replaced with the new value (same <span> contents), and the onclick event is re-assigned. In this way, you can click on the text, change it, click elsewhere, and it is automatically updated in the database. Then you can do it again as it sets up the original events dynamically with each update.

It is in-between the first event and the second that I want access to that <input> field. I want to add a jquery .datepicker() to it.

How would I go about calling .datepicker() on a dynamically-created element?

I'm working with an existing system set up by someone else (no longer here). In this system, clicking on the text within a special <span> will trigger a js function which will replace the text with an <input> field. The text which was there is assigned as the value of the <input> element.

An onblur event is assigned to this new <input> field. This calls a function which updates the data in the database via an AJAX call. As part of this action, the <input> field is replaced with the new value (same <span> contents), and the onclick event is re-assigned. In this way, you can click on the text, change it, click elsewhere, and it is automatically updated in the database. Then you can do it again as it sets up the original events dynamically with each update.

It is in-between the first event and the second that I want access to that <input> field. I want to add a jquery .datepicker() to it.

How would I go about calling .datepicker() on a dynamically-created element?

• javascript
• jquery
• jquery-events

• 2 Couldn't you just update the "js function which will replace the text with an <input>" to bind the datepicker as well? – mu is too short Commented Nov 8, 2011 at 3:07
• actual code would help also... – jondavidjohn Commented Nov 8, 2011 at 3:08
• @mu: it's being used all over, in many scripts, for all text input fields. but I only want to use it for one, so I don't want a calendar button after all those other input fields. makes things a bit more plicated. good idea, though. – user965641 Commented Nov 8, 2011 at 18:46

1 Answer 1

No, there isn't an event similar to an onCreate. The closest you can find is jQuery's .live(). This allows you to bind an event to an element now or in the future. I also think it will probably solve your problem.

http://api.jquery./live/

$('input').live('click', function() {
   $(this).datepicker();
});

As AutoSponge handily pointed out, live is deprecated as of jQuery 1.7. They suggest using on or delegate instead.

http://api.jquery./on/

http://api.jquery./delegate/