地址州混亂

Question

我建立使用jQuery地址而下面這個實例一個簡單的深層鏈接頁：在這個例子中
http://www.asual.com/jquery/address/samples/state/

現在，HTML5瀏覽器（我使用的是Chrome 10），顯示實際顯示的源。即http://www.asual.com/jquery/address/samples/state/portfolio在content div中顯示Portfolio content.，即使該內容是通過Jquery地址/ Ajax/$('.content').html()插入的。我重建了這個例子，但在我的頁面上，源代碼始終是初始頁面之一，在執行任何Ajax之前。這與在非HTML5瀏覽器中的行爲相同。
我在做什麼錯？
感謝提示，
托馬斯

編輯：

這裏的演示代碼：

<script type="text/javascript"> 

     $.address.init(function() { 

      // Initializes the plugin 
      $('.nav a').address(); 

     }).change(function(event) { 

      // Selects the proper navigation link 
      $('.nav a').each(function() { 
       if ($(this).attr('href') == ($.address.state() + event.path)) { 
        $(this).addClass('selected').focus(); 
       } else { 
        $(this).removeClass('selected'); 
       } 
      }); 

      // Handles response 
      var handler = function(data) { 
       $('.content').html($('.content', data).html()).show(); 
       $.address.title(/>([^<]*)<\/title/.exec(data)[1]); 
      }; 

      // Loads the page content and inserts it into the content area 
      $.ajax({ 
       url: $.address.state() + event.path, 
       error: function(XMLHttpRequest, textStatus, errorThrown) { 
        handler(XMLHttpRequest.responseText); 
       }, 
       success: function(data, textStatus, XMLHttpRequest) { 
        handler(data); 
       } 
      }); 
     }); 

     // Hides the tabs during initialization 
     document.write('<style type="text/css"> .content { display: none; } </style>'); 

    </script> 

礦的幾乎相同。我刪除了鏈接突出顯示，將網址更改爲與我的網站相匹配，並在加載html後更改了Ajax調用。我想知道是否還有「更多的東西」（比如文檔沒有提到的必要的.htaccess，但是我在項目的GitHub中找到的）。

這裏是我的代碼：

$.address.init(function(event) { 
     $('#blogMenu a').address(); 
     $('#blogBottomMenu a').address(); 
     $('.linkleiste a').address(); 
}).change(function(event) { 
     var value = $.address.state().replace(/^\/$/, '') + event.value; 
    value = value.replace(/^\/blog\//,''); 
    value = value.replace(/_/,''); 
     var teile = value.split('/'); 
     var name = ''; 
     var thema = ''; 
     if(teile[0]) name = teile[0]; 
     if(teile[1]) thema = teile[1]; 
     $('#blog').hide(); 
      if(!value.match(/ADFRAME/)) { 
       $(document).scrollTo('#aufmacher','fast'); 
       $('#blogMenu').load('/snp/blog_menu.snp',{A_NAME:name,ETIKETT:thema,id:id}); 
       $('#blog').load('/blog/article.snp',{A_NAME:name,ETIKETT:thema,id:id},function() { 
        $('#blog').show(); 
       }); 
      } 
      else { 
       $('#blog').fadeIn('fast'); 
      } 

    }); 

Answer 1

這將是更有益的，如果你有安裝演示給我們看。但通過查看代碼，您需要確保在加載所有內容之前觸發事件。

$(function() { // NOT $(document).ready(function() {}); 
    $.address.init(); 
}); 

此外，您可能必須在沒有散列時觸發散列更改。

$(function() { 
    $.address.init(); 
    $.address.change(); // Triggers hash change when there is no hash! 
}); 

通過查看代碼，它看起來像他們使用不同的佈局，從你的。

var init = true, 
state = window.history.pushState !== undefined; 

// Handles response 
var handler = function (data) { 
    $('title').html($('title', data).html()); 
    $('.content').html($('.content', data).html()); 
    $('.page').show(); 
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]); 
}; 

$.address.state('/jquery/address/samples/state').init(function() { 

    // Initializes the plugin 
    $('.nav a').address(); 

}).change(function (event) { 

    // Selects the proper navigation link 
    $('.nav a').each(function() { 
     if ($(this).attr('href') == ($.address.state() + event.path)) { 
      $(this).addClass('selected').focus(); 
     } else { 
      $(this).removeClass('selected'); 
     } 
    }); 

    if (state && init) { 

     init = false; 

    } else { 

     // Loads the page content and inserts it into the content area 
     $.ajax({ 
      url:$.address.state() + event.path, 
      error:function (XMLHttpRequest, textStatus, errorThrown) { 
       handler(XMLHttpRequest.responseText); 
      }, 
      success:function (data, textStatus, XMLHttpRequest) { 
       handler(data); 
      } 
     }); 
    } 

}); 

if (!state) { 

    // Hides the page during initialization 
    document.write('<style type="text/css"> .page { display: none; } </style>'); 
} 

如果您設置演示，我會更新我的答案。