动态加载的表单和日期选择器未初始化

问题描述

情况： 我正在使用jQuery根据单选按钮选择加载不同的表单（存储在单独的PHP文件中）。在单独的PHP文件中，我正在初始化一个验证器和datepicker。验证似乎可以正常工作，但datepicker不会初始化。 问题： 所有标记都是按顺序进行的，并且我已经将其作为一个文件的一部分进行了测试，并且可以正常工作，这就是为什么我从另一个文件中加载表单时才遇到问题...日期选择器，而不是验证（它们在同一函数中初始化）。 此外： 当我尝试使用Firebug调试问题时，脚本标记和jQuery函数未显示在Dom中，但我知道它正在工作，因为验证正在触发。 加载外部内容的函数：

<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>

外部代码已加载：

<script 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>

资源： datepicker插件：http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html     

解决方法

通常，您将在document.ready块中运行这些jquery命令，该块在页面完全加载后将触发。 我将脚本标记移到页面底部。在读取html元素后，应该执行它。