Question

情况：

我正在使用jQuery根据单选按钮选择加载不同的表单（存储在单独的php文件中）。在单独的php文件中，我正在初始化验证器和datepicker。验证似乎工作正常，但是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

Answer 1

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

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

动态加载Form＆amp; datepicker没有初始化

1 个答案: