0

私はajaxの初心者です。
いくつかのチュートリアルに従いましたが、これが私の結果でした

(function(){

    $('#nav li a').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $('#content').load(href+' #content');
        $('title').load(href+' title');
        $('#nav').load(href+' #nav');
    });

})();

このコードのタイトルの出力は

<title><title>About Us!</title></title>

これがnavコードの出力です

<ul id="nav"><ul id="nav">
        <li><a href="index.html">Index</a></li>
        <li><a href="about.html" class="hover">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul></ul>

要素、タイトル、ナビゲーションバー、コンテンツ以外をロードするより良い方法はありますか?

4

2 に答える 2

3 
(function(){

    $('#nav li a').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $.ajax({
            url: href,
            dataType: 'html'
        }).done(function(html){
            var $html = $(html);
            $('#content').replaceWith($html.find('#content'));
            $('title').html($html.filter('title').text());
            $('#nav').replaceWith($html.find('#nav'));
        });

    });

})();

を使用replaceWithすると、2 回またはタグが削除されます

コメントによると、理由がわからない、onまたはlive機能しない...しかし、代わりにこれを行うことができます...

(関数(){関数テスト(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $.ajax({
            url: href,
            dataType: 'html'
        }).done(function(html){
            var $html = $(html);
            $('#content').replaceWith($html.find('#content'));
            $('title').html($html.filter('title').text());
            $('#nav').replaceWith($html.find('#nav'));
            $('#nav li a').on('click',test );
        });

    }

    $('#nav li a').on('click',test );

})();
于 2013-05-07T10:15:19.387 に答える
2

この場合、リソースを 3 回ロードしています

(function(){

    $('#nav li a').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $.ajax({
            url: href,
            dataType: 'html'
        }).done(function(html){
            var $html = $(html);
            $('#content').html($html.find('#content').unwrap());
            $('title').html($html.find('title').unwrap());
            $('#nav').html($html.find('#nav').unwrap());
        });

    });

})();
于 2013-05-07T10:05:35.613 に答える