jQuery 테스트에서 작동하지만 구현시 작동하지 않음

Question

멍청한 질문에 사과 하긴하지만 실제로이 문제에 대한 해결책을 찾을 수 없습니다.

토글을 클릭하면 링크가 나타납니다.

$("#pastShows").click(function() { $(".shows").toggle("slow"); });

<h3 id="pastShows"><a href="javascript:void(0)">Past</a></h3> 
<div class="shows"> 
    <ul> 
    <li>Show 1</li> 
    <li>Show 2</li> 
    <li>Show 3</li> 
    <li>Show 4</li> 
    </ul> 
</div>​ 

그것은이 피들러에서 완벽하게 작동

. http://jsfiddle.net/Chadimoglou/NG8Dj/2/

그러나 나는 여기 http://www.kiirstinmarilyn.com/#shows

구현 도움을 친절하게 해 주셔서 감사 때이 동작하지 않습니다.

Answer 1

가 좋아, 문제는 여기에 당신이 document.ready() 또는 $(function() {}의 장소에서, window.onload를 사용하고 있습니다. jQuery의 document.ready() 메소드는 DOM이 준비되면 곧 호출됩니다 (브라우저가 HTML을 구문 분석하고 DOM 트리를 작성했음을 의미 함). 웹 페이지에 큰 이미지가 있으면 이미지를 완전히로드 할 때까지 기다리지 않습니다. 따라서 window.onload 방법 전에 호출 할 수 있습니다. 우리는 웹 페이지에 여러 개의 document.ready() 메쏘드를 가질 수 있습니다. 반면에 window.onload 메서드는 이미지와 페이지의 관련된 모든 리소스가 완전히로드 될 때 호출됩니다. 웹 페이지에 큰 이미지가 있고 모든 이미지가 페이지에 완전히로드되지 않을 때까지 window.onload 메서드가 호출되지 않습니다. 와

window.onload=function(){ 
    $("#pastShows").click(function() { 
     $(".shows").toggle("slow"); 
    }); 
} 

:

그래서 그냥 코드를 대체

$(function() 
{ 
    $("#pastShows").click(function() { 
     $(".shows").toggle("slow"); 
    }); 
} 

희망이 도움이!

Answer 2

window.onload를 제거하고 초기화 코드를 document.ready에 넣어보십시오.

이 교체 :이

/*----Toggle past shows----*/ 
window.onload=function(){ 
    $("#pastShows").click(function() { 
     $(".shows").toggle("slow"); 
     alert("It Worked"); 
    }); 
} 

을 :

$(function() 
{ 
    $("#pastShows").click(function() { 
     $(".shows").toggle("slow"); 
     alert("It Worked"); 
    }); 
}