주소 국가 혼란

Question

내가이 예를 JQuery와 주소를 사용하여 다음과 같은 간단한 딥 링크 페이지 구축이 예에서 이제
http://www.asual.com/jquery/address/samples/state/

을하는 HTML5 브라우저 (I 크롬 10 사용) 실제 표시 소스를 보여줍니다. 나는. http://www.asual.com/jquery/address/samples/state/portfolio은 content div에 Portfolio content.을 표시합니다. 콘텐츠가 Jquery address/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> 

광산의 거의 동일합니다. 링크 강조 표시를 제거하고 URL을 내 사이트와 일치하도록 변경하고 html을로드하고 있기 때문에 Ajax 호출을 변경했습니다. 문서에 실제로 언급하지 않지만 필요한 프로젝트의 GitHub에서 찾은 필요한 ".htaccess"와 같이 "더 많은 것"이 있는지 궁금합니다.

여기에 내 코드 : 당신이 설정에게 우리가 보는 대한 데모를했을 경우

$.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>'); 
} 

데모를 설정하면 내 답변이 업데이트됩니다.