0

ajaxナビゲーションを行うjqueryの推奨方法

この単純な jquery ajax コードを試して、ページ内のすべてのリンクを ajax 方式でロードしました。

$('a').click(function(e){
        e.preventDefault();
        url = $(this).attr('href');
        $('body').fadeTo('slow', 0.2); 
        $('body').load(url, function(data){
            $(this).fadeTo('slow', 1, function(){
                $(this).html(data);
                scroll(0,0);
            });
        });
    });

[ページ内のリンクは現在のドメインに固執し、外部リンクは存在しません]

ページの読み込みは期待どおりに機能しますが、Facebook、LinkedIn、ピンタレスト ボタンのスクリプトは読み込みに失敗します。

これは ajax ナビゲーションを行う最も安全な方法ではないと思います。また、他の JS ファイルやインライン JavaScript がエラーを引き起こすと確信しています。

http://davidwalsh.nameには、mootools を使用した優れた ajax ナビゲーション機能があります。jqueryを使用して同じことを達成しようとしています。

Web サイトはすべてのスクリプトを正常にロードして実行しますが、特定のスクリプトをロードするための ajax 作業が行われていないことがわかります。

これを達成するための安全な方法はありますか?

4

1 に答える 1

0

ロード ハンドラ内でスクリプトをアタッチする関数を呼び出す必要があります。これにより、各ロードですべての DOM スクリプトが再アタッチされます。

F.ex、このコードがある場合：

$(document).ready(function() {
    $('#facebook').doFacebook();
    $('#twitter').doTwitter();
});

次のように変更します。

var onload = function() {
    $('#facebook').doFacebook();
    $('#twitter').doTwitter();
};
$(document).ready(onload);

次に、が新しいコンテンツを取得するonloadたびに呼び出すだけです。body

インライン スクリプトは、ドキュメントに従って実行する必要があります。

以下を使用してブラウザの履歴と URL を操作する方法についてもお読みください.pushState。

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

少しグーグルで調べれば、この機能をクロスブラウザ方式で追加する適切な jQuery プラグインがあります。

于 2012-11-23T07:04:09.257 に答える