.load()加载包含datepicker和rangelider的网页,但它们不起作用(JQuery)

时间:2014-04-29 18:40:05

标签: jquery html jquery-ui datepicker jquery-ui-slider

在我的主网页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上?

0 个答案:

没有答案