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

Question

情况：

我正在使用 jQuery 根据单选按钮选择加载不同的表单（存储在单独的 php 文件中）。在单独的 php 文件中，我正在初始化验证器和日期选择器。验证似乎工作正常，但日期选择器未初始化。

问题：

所有标记都是按顺序排列的，我已经将其作为一个文件的一部分进行了测试，并且工作正常，这就是为什么我从一个单独的文件加载表单的原因，我得到了问题...并且仅适用于日期选择器，而不适用于验证（它们在同一函数中初始化）。

此外：

当我尝试使用 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>

资源： 日期选择器插件： http://www.kelvinluck.com/assets/ jquery/datePicker/v2/demo/index.html

Answer 1

通常，您会在 document.ready 块中运行这些 jquery 命令，该块将在页面完全加载后触发。

我会将脚本标签移动到页面底部。它应该在读入 html 元素后执行。