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

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.