在我的主网页main.htm上,我有一个div按钮,当点击它时会加载另一个名为searchhotel.htm的网页。在searchhotel.htm里面我有一个JQuery日期选择器和一个rangelider。当我将这些页面上传到服务器时,如果我直接访问searchhotel.htm,则datepicker和rangesliders可以正常工作。但是当我在main.htm上并且点击“search”将searchhotel.htm加载到主div中时,唯一显示的是日期文本框,并且日期选择器没有显示,并且rangelider也没有显示。
main.htm中
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
function my_loader(array) {
switch(array) {
case "search": $('#mainpanel').load("searchhotel.htm");
break;
}
}
</script>
</head>
<body>
<div id = "top_title_panel">
<div id = "title_div"><span id = "title">Hello</span></div>
</div>
<div id = "btn_panel_div">
<div id = "search" class = "btn_div" onClick= "my_loader(this.id)">Search Hotel</div>
</div>
<div id = "mainpanel"></div>
</div>
</body>
</html>
searchhotel.htm
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="jquery.js"></script>
<script src="jquery-ui.custom.js"></script>
<script src="jQRangeSlider-min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<p>HI</p>
<div>
<script>
$(function() {
$( "#datepicker" ).datepicker(
{dateFormat: "yy-mm-dd"});
});
$(function() {
$( "#slider" ).rangeSlider();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>
<div id="slider"></div>
</div>
</body>
</html>
有没有人知道为什么我的日期选择器和滑块没有显示在main.htm上?