【发布时间】：2014-06-06 02:19:46
【问题描述】：
我无法让 jquery UI 日期选择器初始化。我可以在独立的 html 文件上很好地初始化它，但是当我使用 jquery .load 函数将 html 解析为现有容器时；日期选择器不会初始化。我正在使用 bootstrap v.3 并尝试了各种 jquery 版本。
这是我的 html（我省略了从索引加载的顶部）。
<link href="css/customApp.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TheWarOnCost.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li id="dashNav1" class="active"><a onclick="dashNav(1);">The War Room</a></li>
<li id="dashNav2"><a onclick="dashNav(2);">Record New Battle</a></li>
<li id="dashNav3"><a onclick="dashNav(3);">Remove Battle</a></li>
</ul>
<ul class="nav nav-sidebar">
<li id="dashNav4"><a onclick="dashNav(4);">Goal Tracker</a></li>
<li id="dashNav5"><a onclick="dashNav(5);">Year to Date Report</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div id="mainContent">
<!-- Main content inserted here on nav click -->
</div>
</div>
</div>
</div>
这是我加载页面片段的 html
<div id="addTripInsert">
<h1 class="page-header">New Battle Stats</h1>
<div class="row placeholders">
<div id="clearFix"> </div>
<div class="col-xs-12 col-sm-12 placeholder aTiC_Wrap" style="xbackground-color:rgba(0,0,255,.4); height:100px;">
<div class="col-xs-12 col-sm-12 addTripInputs" style="background-color: rgba(66, 139, 202, .3); border-radius:10px; height:75px;">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" class="svgNum">
<circle id="svg_1" r="16.93171" cy="20" cx="20" stroke-width="2" stroke="#428bca" fill="#ffffff"/>
<text font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="29" id="svg_2" y="31" x="20" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#428bca" fill="#ef3bff">1</text>
</svg>
<h4 class="aTi_Title" style="width:117px;">Trip Date</h4>
<div class="col-xs-12 col-sm-7 aTi_content">The date this battle was waged.</div>
<div class="col-xs-12 col-sm-5 aTi_content"><input id="datepicker"></div>
</div>
片段是用这个 javascript 加载的
function dashNav(option){
$("li").click( function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
switch(option)
{
case 1:
// alert('You have selected Battle Tracker which is menu option #' + option);
$( "#mainContent" ).load( "modules/mainTracker.php #trackerInsert" );
break;
case 2:
// alert('You have selected Add shopping trip which is menu option #' + option);
$( "#mainContent" ).load( "modules/addTrip.php #addTripInsert" );
break;
case 3:
// alert('You have selected Remove shopping trip which is menu option #' + option);
$( "#mainContent" ).load( "modules/removeTrip.php #remTripInsert" );
break;
case 4:
// alert('You have selected Goal Tracker which is menu option #' + option);
$( "#mainContent" ).load( "modules/goalTracker.php #goalTrackerInsert" );
break;
case 5:
// alert('You have selected Year to date savings which is menu option #' + option);
$( "#mainContent" ).load( "modules/ytdSavings.php #ytdsInsert" );
break;
default:
}
}
$( "#datepicker" ).datepicker();
基本上，页面的外部模板是使用 php 内核呈现的。加载外部模板后，它会加载第一个页面片段（未显示）。一旦用户单击第二个导航选项 (addTrip)，它就会使用 .load 将该片段注入到原始标记中的主要内容 div 中。这会影响初始化吗？
抱歉，这听起来像是一个重复的问题。我没有找到任何可以充分处理这个案子的东西。
【问题讨论】：
标签： javascript jquery html