Dynamically loaded Form & datepicker not initializing

The Situation:

I am using jQuery to load different forms(stored in separate php files) based on a radio button selection. Within the separate php files I am initializing a validator and datepicker. The validation seems to work fine, but the datepicker does not initialize.

The Problem:

All of the mark-up is in order, and I have tested it as part of one file and it works fine, it's only why I load the forms from a separate file that I get the problem... and only with the datepicker, not the validation(they initialize in the same function).

Furthermore:

When I try to use firebug to debug the problem, the script tags and jQuery function does not show up in the Dom, but I know it is working because the validation is firing.

The function that loads the external content:

<script type="text/javascript">
                $('#hpbooking_select input[type=radio]').live('change', function() { //Setting up the chenge  event for the radio button
                    var AffectedRegistration = $(this).parents('#hpbooking_select').parent();
                    //alert($(AffectedRegistration).attr('class'));
                    var ID = $(this).attr('id'); //getting the ID of the radio button
                    var IDArray = ID.split('_'); //seperating the ID into an array
                    var regURL = '/wp-content/themes/1000ik/hpbooking/' + IDArray[1] + '.php'; //building a url to load
                    var childPIPR = $(AffectedRegistration).children('.hpbooking_registration');
                    //alert(regURL); FOR TESTING ONLY
                    //$(childPIPR).html(regURL); FOR TESTING ONLY
                     $(childPIPR).load(regURL); //loading the url

                });
                </script>
            <div id="hpbooking_container">
                <div id="hpbooking_select">
                    <h2>What type of adventure are you looking for?</h2>
                    <fieldset>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_guidedtrip" /><label for="bookingselect_guidedtrip">A Guided Trip</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_course" /><label for="bookingselect_course">A Course</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_group" /><label for="bookingselect_group">Tour Group</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_paddlefest" /><label for="bookingselect_paddlefest">Paddlefest 2011</label>
                        <input type="radio" class="bookingselect" name="bookingselect" id="bookingselect_paddleplay" /><label for="bookingselect_paddleplay">Paddle and Play</label>
                    </fieldset>
                </div>

The External Code loaded:

<scrip开发者_StackOverflowt type="text/javascript">
jQuery(function(){
jQuery("#hpbookingform").validate();
jQuery('.date-pick').datePicker();
}); 
</script>
<form id="hpbookingform" method="post" action="/wp-content/themes/1000ik/engine-hpguidedtrips.php" >
<fieldset><LABEL for="daytrip_date">Date </LABEL><input type="text" value="" class="date-pick dp-applied required" id="daytrip_date" name="daytrip_date" /></fieldset>
</form>

Resources: datepicker plugin: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

Usually you would run those jquery commands in a document.ready block which would fire after the page had been fully loaded.

I would move the script tag to the bottom of the page. It should get executed after the html elements have been read in.