4

私は2つの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

[以下の私の質問を改善するために編集]

今私の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>
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ページに

OK、このチュートリアルを読んでください：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>
于 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 に答える