(window.location.hash) 이벤트가 부분적으로 만 실행되는 경우

Question

해시 태그를 사용하여 탐색 표시 줄에서을 클릭하여 표시되는 div를 표시하려고합니다. (내가 대신 페이지에 대한 링크 jQuery를 사용하고 있는데 나는 그들에게 직접 연결 가능을 할 수 있습니다.) 어떤 이유

을 단지 부품 일어날 수있는 .click 기능의의 원인! ??? 여기

내가 해시 페이지를 다시로드 할 때

//Close 
$('#close').click(function() { 
    $('#bio, #books, #extras, #news, #contact').fadeOut('slow'); 
    $('.bio, .books, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow',1); 
    $('#close').fadeTo('slow',0); 
    window.location.hash = ''; 
}); 

//Title 
$('#titlelink').click(function() { 
    $('#bio, #books, #extras, #news, #contact').fadeOut('slow'); 
    $('.bio, .books, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow',1); 
    window.location.hash = ''; 
}); 

//Bio 
$('.bio').click(function() { 
    $('#bio').fadeIn('slow'); 
    $('.bio').addClass('nav-selected'); 
    $('#books, #extras, #news, #contact').fadeOut('slow'); 
    $('.books, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 1); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'bio'; 
}); 

//Books 
$('.books').click(function() { 
    $('#bookswrap, #books').fadeIn('slow'); 
    $('.books').addClass('nav-selected'); 
    $('#bio, #extraswrap, #newswrap, #contact').fadeOut('slow'); 
    $('.bio, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 0.2); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'books'; 
}); 

//Extras 
$('.extras').click(function() { 
    $('#extraswrap, #extras').fadeIn('slow'); 
    $('.extras').addClass('nav-selected'); 
    $('#bio, #bookswrap, #newswrap, #contact').fadeOut('slow'); 
    $('.bio, .books, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 0.2); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'extras'; 
}); 

//News 
$('.news').click(function() { 
    $('#newswrap, #news').fadeIn('slow'); 
    $('.news').addClass('nav-selected'); 
    $('#bio, #bookswrap, #extraswrap, #contact').fadeOut('slow'); 
    $('.bio, .books, .extras, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 0.2); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'news'; 
}); 

//Magnus 
$('.magnus').click(function() { 
    window.open('http://magnusflyte.com/'); 
}); 

//Contact 
$('.contact').click(function() { 
    $('#contact').fadeIn('slow'); 
    $('.contact').addClass('nav-selected'); 
    $('#bio, #books, #extras, #news').fadeOut('slow'); 
    $('.bio, .books, .extras, .news').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 1); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'contact'; 
}); 

if(window.location.hash) { 
    $('.' + window.location.hash.substr(1)).click(); 
} 

그래서 배경이 제대로 페이드 (내가이 지경으로 세련 확신하지만이 작업이 이루어지고있어, 새로운 해요) 내 스크립트이고 클래스는 div (예 : #bookswrap, #books)가 바뀌지 않습니다.

아이디어가 있습니까? 나는이 모든 것을 처음 접했을 때 바보 같은 짓이라고 생각한다.

Answer 1

페이지 상단이나 하단에 있습니까? 내 생각 엔 페이지가 아직 완전히로드되지 않았으므로 첫 번째 몇 줄은 실행되지 않고있다. 즉, race condition이지만 jQuery가 내부 이벤트 대기열에 넣기 때문에 더 낮은 줄이 실행되기 때문에 실제로 몇 밀리 초 후에 실행된다. 사건 이잖아, 그냥 이런 식으로이 모든 일을 마무리 : 전체 파일이로드 된 후 jQuery를 알려줍니다

$(function() { 
    //all your code in here 
}); 

는이 코드를 실행합니다.