2

私よりも jQuery をよく知っている人 (このコードを試す最初の週なので、おそらく 99% はここにいます :) 時間が残っている場合は、私が本当に答えを必要としている質問に答えてください。間違った英語で申し訳ありません。

おそらく、外部ページのコンテンツを div に配置すること、およびそのようなロードされた div に適切にロードされない UI 選択スライド要素について私が尋ねた他の質問を読んだことがある人もいるでしょう。ここで情報を収集するための新しい主題。主な質問は、UI スライダー (選択要素) が (別のページの div から) jQuery を介して (同じホームページ内で) div にロードされたときに機能しない理由です。

これは、コンテンツをサイトにロードするために使用しているコードです。

load_script.js
$(document).ready(function(){
    $('#div_that_will_receive_content').load('from_page.html #from_div');
});

問題:問題は 2 つの異なる方法で発生します。1: DIV のみが読み込まれると、スライダーは表示されず、div のすべての要素が表示され、div はスライダーを除いて正しく読み込まれます。読み込み時にスライダーが 0.1 秒間表示され、その後消えます。2: サイト全体 (UI スライダーを含む) が読み込まれると、コンテンツがループし、サイトの読み込みが停止することはありません。ブラウザー コンソールでチェックインすると、25 ～ 30 MB が数秒で読み込まれます。この場合でも、スライダーは読み込み時に正確に 0.1 秒間表示され、サイトのループ読み込みのためにスライダーが点滅します。

Page_1.html

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui-1.9.2.js" type="text/javascript"></script>
<script src="load_script.js" type="text/javascript"></script>

<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />

<script>
$(function() {
    $( "#slider" ).slider();
});
</script>
</head>
<body>

<div id="div_1">DIV 1 = This is where the content of div_2 should be</div>

</body>
</html>

Page_2.html

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui-1.9.2.js" type="text/javascript"></script>
 <script src="load_script.js" type="text/javascript"></script>

<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />

<script>
$(function() {
    $( "#slider" ).slider();
});
</script>
 </head>
<body>

<div id="div_2">DIV 2 = This div containing a slide-select-element will be loaded to to     div_1</div>

</body>
</html>

load_script.js

<script>
    $(document).ready(function(){
        $('#div_1').load('Page_2 #div_2');
});
</script>

私はまだこれにいくつかの問題を抱えています。問題は、Page2.html 全体を Page1.html の div にロードすると、すべてうまくいくことです。しかし、Page2.html から選択した div をロードしただけでは、スライド要素は表示されませんが、残りのコンテンツ (テキスト) は表示されます。

この作業と、スライダーを含むページ全体が読み込まれます。

<script>
    $(document).ready(function(){
        $('#div_1').load('Page_2');
});
</script>

これは機能せず、スライダーは表示されませんが、残りのコンテンツは表示されます (テキスト):

<script>
    $(document).ready(function(){
        $('#div_1').load('Page_2 #div_2');
});
</script>

これが何に依存するのか、誰にも手がかりがありますか？

4

1 に答える 1

2

2 番目のページですべてのスクリプト インポートを削除します。1 回だけロードする必要があります。また、ロードするたびload_script.jsに、ロード関数がそこにあるため、無限ループが発生します。その後、.load() のコールバック関数を使用してスライダーを初期化できます。

$(document).ready(function(){
    $('#div_that_will_receive_content').load('from_page.html #from_div',function(){
         $( "#slider" ).slider();
    });
});

ただし、そのページを個別に使用している場合は、ページ 2 が壊れます。その場合は、page2 から以下を削除するだけです。

<script src="load_script.js" type="text/javascript"></script>
于 2012-12-18T19:18:56.320 に答える