2

ページをdivにロードしています

<script>
$(document).ready(function() {
    $("#link").click(function(e) {
        e.preventDefault();
        $("#div").load("page.php");
});
</script>

ページは読み込まれますが、page.php にある JavaScript は読み込まれません。これは私が持っているものです:

<script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
$(function() {
    $("#date").datePicker(); 
}); 
</script>

(独自のタブ/ウィンドウのように) div の外で page.php を読み込むと、ページは完全に機能します。(上記はhttp://jqueryui.com/datepickerからのコピペです)。

何が原因で、どうすれば解決できますか?

4

3 に答える 3

2

スクリプトが読み込まれることはありません。それらはロード中に取り除かれます。

(上記はhttp://jqueryui.com/datepicker/からのコピペです)

サンプルのソース全体をコピーしているという意味だと思いますが、これは大まかに次のようになります。

<!doctype html>

<html lang="en">
<head>
  <!-- Snipped for brevity: A bunch of script and link elements-->
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>
</html>

したがって、jQuery の load 関数を使用してこのドキュメントを取得し、div 内に配置しています。

$("#div").load("page.php");

ロードはここでは連携しません

.load() のドキュメントによると:

jQuery はブラウザの.innerHTMLプロパティを使用して、取得したドキュメントを解析し、現在のドキュメントに挿入します。このプロセス中に、ブラウザーは<html>、 、<title>、または<head>要素などの要素をドキュメントからフィルター処理することがよくあります。その結果、 によって取得された要素は.load()、ドキュメントがブラウザによって直接取得された場合とまったく同じではない場合があります。

私自身の経験では、これは通常.load()、 body 要素自体ではなく、 body 要素内からのみコンテンツを返すことを意味します。つまり、上記のサンプルから、実際に読み込まれている HTML はこれだけです。

<p>Date: <input type="text" id="datepicker" /></p>

ブラウザーの開発者ツール (F12) を使用して、スクリプトにブレークポイントを設定し、実際に何が読み込まれるかを調べる必要があります。

どうすればこれを適切に行うことができますか？

それには2つの部分があります。

パート 1: リソースを<head>要素の外に移動する

Datepicker コード サンプルには、<head>. これらを別の場所に配置する必要があります。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

リンク要素

これらは、読み込んでいるページでは読み込めません。<head>この他のページをロードしようとしている親ページの要素内にそれらを配置します。

スクリプト要素

これらは、次の条件を満たしている限り、ドキュメントをロードするときにもロードされます。

ただし、使用することがわかっているのは jQuery と jQuery UI だけです。これらを親ページの<head>要素に移動することもできます。

2. 搭載しようとしている重要なビットを本体に配置します。

それはこれらのビットです：

<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>

<body>ロードしようとしているドキュメントの要素内にそれらを配置します。次に、スクリプトに関するアドバイスに従った場合、これは正常に読み込まれます。

必要に応じて、jQuery 参照を に含めます<body>。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
于 2013-05-07T01:20:53.843 に答える
2

変更する必要があるかもしれません：

<script>
$(function() {
  $("#date").datePicker(); 
}); 
</script>

に

<script>
  $("#date").datePicker(); 
</script>

document.readyイベントはすでに発生している$(function() {ため、待機するように指示されています。jquery が ajax されたコンテンツでスクリプトを自動的に実行するかどうかはわかりません。そうでない場合は、これを試すことができます (必ずしも安全であるとはeval限りません。これを行う場合のセキュリティ リスクを理解していることを確認してください)。 

$("#div").load("page.php", function() {
    $("#div").find("script").each(function(i) {
        eval($(this).text());
    });
});

注：これは次のように実行されます：

<script>
  $("#date").datePicker(); 
</script>

しかし、次のようなものではありません:

<script>
$(function() {
  $("#date").datePicker(); 
}); 
</script>

document.ready繰り返しますが、2 番目は既に発生したイベントを待機します。

于 2013-05-07T00:34:05.873 に答える