jQuery datepicker won't work on a AJAX added html element

Question

I have a jQuery datepicker function bound to the "birthday" input html element, written in the page header:

<script type="text/javascript">
    $(function() {
        $( "#birthday" ).datepicker();
    });
</script>

Next, I have some AJAX functionality - it adds new input html element to the page. That element is:

<input type="text" id="birthday" value="" class="detail-textbox1" />

Clicking on that birthday element does not pop up the date picker below the text field. I expected this, as the element is added after the page is loaded, thus it isn't in relation with the function provided in the header.

How can I make it work? I tried moving the script from the header to the body, but nothing seems to work. Thanks.

P.S. If I create an input html element with id="birthday" in the page body, everythig works as expected. It appears that only the elements added through AJAX are dysfunctional.

Answer 1

I'm a bit late to the party, but for thoroughness - and with the .live() function being deprecated from jQuery 1.7 onwards - I thought I'd provide an updated solution based on my experiences, and from all the help I got from other answers on StackOverflow!

I had a situation where I needed to add the datepicker functionality to input fields that were being added to the DOM through AJAX calls at random, and I couldn't modify the script making the AJAX calls to attach the datepicker functionality, so I opted for the new shiny .on() function with its delegation features:

// do this once the DOM's available...
$(function(){

    // this line will add an event handler to the selected inputs, both
    // current and future, whenever they are clicked...
    // this is delegation at work, and you can use any containing element
    // you like - I just used the "body" tag for convenience...
    $("body").on("click", ".my_input_element", function(){

        // as an added bonus, if you are afraid of attaching the "datepicker"
        // multiple times, you can check for the "hasDatepicker" class...
        if (!$(this).hasClass("hasDatepicker"))
        {
            $(this).datepicker();
            $(this).datepicker("show");
        }
    });
});

I hope this helps someone, and thanks for all the answers so far that led me to this solution that worked for me! :)

Answer 2

You need to use .live() so that any newly added elements have the event handler attached: http://api.jquery.com/live/

$('#birthday').bind('load', function() {
    $(this).datepicker();
});

EDIT

.live() documentation states, that it is a bit out of date. With new versions of jquery (1.7+) use .on().