Question

我有两个html main.html和a.html

<html>
<head>
<title> main.html   </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
     $("#y").click(function()
     {
       $('#y1').load('a.html');
     });
});
</script>
</head>
<body>
  <div id="y">link1    </div>
  <div id="y1">frame   </div>
</body>
</html>

a.html

<html>
<head>
<title>a.html    </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
      $("#date").datepicker();
      $("#y2").on("click",function(){
          alert("clicked data in a.html");
      });
});
</script>
</head>
<body>
  <div id="y2"> click here to get alert   </div>
  <input id="date" type="text" />
</body>
</html>

当我打开a.html文件时，datepicker运行良好，但打开main.html文件，单击“link1”将a.html加载到main.html datepicker失败，我在firefox错误控制台中收到错误消息

>Error: TypeError: $(...).datepicker is not a function
>Source File: http://code.jquery.com/jquery-latest.js?_=1362478481277
>Line: 605

[EDITIED改进我的问题]

现在是我的main.html

<html>
<head>
<title> main.html   </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function() {
     $("#y").click(function()
     {
       $('#y1').load('a.html');
     });
     $("#y4").click(function()
     {
       $('#y1').load('b.html');
     });
});
</script>
</head>
<body>
  <div id="y">link1    </div>
  <div id="y4">link2    </div>
  <div id="y1">frame   </div>
</body>
</html>

a.html

<html>
<head>
<title>a.html    </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
      $("#date").datepicker();
      $("#y2").on("click",function(){
          alert("clicked data in a.html");
      });
});
</script>
</head>
<body>
  <div id="y2"> click here to get alert   </div>
  <input id="date" type="text" />
</body>
</html>

b.html

<html>
<head>
<title>b.html    </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
      $("#date1").datepicker();
      $("#y3").on("click",function(){
          alert("clicked data in b.html");
      });
});
</script>
</head>
<body>
  <div id="y3"> click here to get alert   </div>
  <input id="date1" type="text" />
</body>
</html>

Answer 1

尝试添加

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"/>

到你的main.html页面

好的，请阅读本教程：http://webtutsdepot.com/2009/06/13/ajax-page-loading-with-jquery/

重要提示：当您将页面加载到另一个页面时，您加载的页面将从当前页面获取样式，这意味着所有你需要在页面中加载你想要加载的内容标签

因此，您需要在main.html页面中加载所有脚本文件，而其他页面中所需的只是

*编辑更改了main.html和a.html以反映您的问题，这可以解决您的脚本冲突问题

main.html

<html>
<head>
<title> main.html   </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
<script>
$(document).ready(function() {
    $("#y").click(function()
    {
       $('#y1').load('a.html #calendar'
       , function() {
            $("#date").datepicker();
            $("#y2").on("click",function(){
                alert("clicked data in a.html");
            });
       });
    });

    $("#y4").click(function()
    {
       $('#y1').load('b.html #calendar'
       , function() {
            $("#date1").datepicker();
            $("#y3").on("click",function(){
                alert("clicked data in b.html");
            });
       });
    });
});
</script>
</head>
<body>
  <div id="y">link1    </div>
  <div id="y4">link2    </div>
  <div id="y1">frame   </div>
</body>
</html>

a.html

<html>
<head>
<title>a.html</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
  <div id='calendar'>   
  <div id="y2"> click here to get alert   </div>
  <input id="date" type="text" />
  </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
      $("#date").datepicker();

      $("#y2").on("click",function(){
      alert("clicked data in a.html");
      });
});
</script>

Answer 2

我遇到了同样的问题，使用以前版本的“JQuery-UI”解决了。在我的情况下，使用版本1.9.2和1.10.3到“JQuery”版本1.10.1。知道原因，但我认为最新版本带来了一些紧凑的问题，所以我选择总是落后于过去。我希望它会有用

日期选择器jquery插件不通过jquery load方法在另一个页面中工作

2 个答案: