4

我有两个 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>

一个.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

[编辑以改善我的问题]

现在我的 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>

一个.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>
4

2 回答 2

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>

一个.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>
于 2013-03-05T10:31:30.160 回答
0

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

于 2013-07-16T15:53:21.217 回答