1

#content単一ページの Web サイト (上部のナビゲーション、左側のサイドバー、およびコンテンツを交換するための div) を作成したいと考えています。

$(document).ready(function() { // or click on a button
$('#content').load('somepage.php');
});

<script src="jquery-1.9.1.min.js"></script>
<script src='index.js'></script>

スクリプトは読み込まれたページの外側、つまりメイン ページの内側にあります。

2 つの質問:

  1. このアプローチの問題や欠点はありますか?
  2. jqueryロードされた内部で機能するのに機能しないのはなぜ#somepage.phpですかindex.js ? ロードされたページ内にコードを記述する必要があります。

例えば： 

$("#stick").click(function() {
    $(this).hide();
});

このコードは内部にありindex.jsます。 stick内にありsomepage.phpます。内部に書き込むまでコードは機能しませんsomepage.php

4

3 に答える 3

4

からコードをリファクタリングする場合

$("#stick").click(function() {
    $(this).hide();
});

に

$(document).on('click', "#stick", function() {
    $(this).hide();
});

..等。あなたの他のすべての要素のために。

これはそのまま機能します。コールバックなどは必要なく、読み込まれたページではなく読み込みページに js ファイルを配置できます。

ImShogun からの回答は非常に非効率的であり、常にイベントを再バインドし、スパゲッティ コードなどになります。

.onで jQuery ドキュメントを読む

オンの場合、イベントをドキュメントに添付し、selector() に基づいてイベントをリッスンします"#stick"。これは、ドキュメントがコンテキストから外れることはなく、イベント ハンドラーもそうしないため、再バインドせずに動的コードで機能するためです。

于 2013-11-05T11:09:39.760 に答える
1

  1. ユーザーが JS をオフにすると、サイトが機能しなくなります。フォールバックを使用する (新しいコンテンツでサイトをリロードする)

  2. とはindex.js? DOM で何かを行う index.php に読み込まれる JavaScript を作成してから、ページを読み込み (に挿入#content)、読み込まれたページで JS が機能しないということですか?

これを jQuery で処理するには、このドキュメントを参照してください。

于 2013-11-05T10:45:05.983 に答える
0

最初に、HTML と JavaScript が混在するコードを少し示しているため、Web ページで最初に読み込まれるものを推測するのは困難です。完全なコードを示す必要があるかもしれません。

ただし、jquery スクリプトをロードしてからインデックス スクリプトをロードし、次にロード コードを実行すると仮定すると、次のいずれかが存在するはずです。

  • index.js に記述した何かの実行をトリガーするロード内のコールバック
  • index.js で何かをトリガーする somepage.php のスクリプト タグ (あまりお勧めしません。ajax を使用して html と JavaScript を混在させると、心と JavaScript エンジンの両方が混乱する可能性があります!)
  • 「async:false」で構成できる jquery load() から jquery ajax () に切り替えます。これは、以前のソリューションよりもさらに推奨されません。 .

おそらく今、あなたの index.js スクリプトは、まだロードされていない html ページを処理しようとしているので、ページのロードは非同期です。終了しました。

だから私はこれをします：

1）index.jsにある実行コードを「afterLoad」関数に集中させます

index.js コンテンツ:

afterLoad=function(){
   alert('Hello World');
}
otherStuff1=function(){
...
}
...

2) ページがロードされるとコールバックが実行されるように、それに応じてロード スクリプトを変更します。

$(document).ready(function() { // or click on a button
    $('#content').load('somepage.php',function(){
        afterLoad();
    });
});

そして...はい、このアプローチにはマイナス面があるかもしれません.検索エンジンがあなたのウェブサイトをナビゲートしようとして1ページしか見つけられない. ロボット (javascript エンジンなし) が従来のハイパーリンクを介してページを参照できるように、「フォールバック」が必要です。

于 2013-11-05T10:56:35.307 に答える