如何解决动态加载的表单和日期选择器未初始化
情况: 我正在使用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元素后,应该执行它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。