0

私は pushState の Web サイトを作成しようとしていますが、問題は .nav のすべてが消えることです。

何が起こっているのかわかりません。おそらくjqueryバージョンなので、index.htmlのコードは次のとおりです。

        <!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script type="text/javascript" src="assets/application.js"></script>
    <title>One</title>
  </head>
  <body>
  <audio controls>
<source src="mp.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <div id="body">
<div id="menu">
<div class="nav">
<a href="two.html">d</a>
</div>
</div>
</div>
  </body>
</html>

およびapplication.js:

$(function(){
    var replacePage = function(url) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var title = dom.filter('title').text();
                var html = dom.filter('.nav').html();
                $('title').text(title);
                $('.nav').html(html);
            }
        });
    }

    $('a').live('click', function(e){
        history.pushState(null, null, this.href);
        replacePage(this.href);
        e.preventDefault();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

ここにJSFiddleがあります

two.html:

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script type="text/javascript" src="assets/application.js"></script>
    <title>One</title>
  </head>
  <body>
  <audio controls>
<source src="mp.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <div id="body">
<div id="menu">
<div class="nav">
<a href="index.html">djbghasighaslashb</a>
</div>
</div>
</div>
</body>
</html>
4

1 に答える 1

0

目的の要素がルート レベルにあるのか、DOM ツリーのどこか深いところにあるのかわからない場合は、完全な html 応答をルート要素にラップすると便利な場合があります。

success: function( data ){

  // create a single container element, and put the html response into it
  var dom = $('<div>').html( data );

  // now you never have to use .filter(), just .find()
  var title = dom.find('title').text();
  var html  = dom.find('.nav').html();
  ...
}
于 2013-09-29T19:03:25.620 に答える