부트 스트랩 3 Scrollspy 발사하지 않는 이벤트 활성화

ScrollPy로 부트 스트랩 3 RC1을 사용하여 사이트를 만들려고합니다. 내 웹 페이지가 지금 아주 간단하고 기본적으로 다음과 같이 설정 :부트 스트랩 3 Scrollspy 발사하지 않는 이벤트 활성화

<html> 
    <head> 
     <!-- Head stuff here --> 
    </head> 

    <body> 
     <section id="section_1" data-spy="scroll"> 
      <!-- stuff in here --> 
     </section> 
     <section id="section_2" data-spy="scroll"> 
      <!-- stuff in here --> 
     </section> 
     <section id="section_3" data-spy="scroll"> 
      <!-- stuff in here --> 
     </section> 

     <JScripts here ... /> 
    </body> 
</html>

내가 $("section").scrollspy()를 호출하여 Scrollspy을 초기화 한 나는이 같은 이벤트 핸들러를 설정 한 :

$("section").on("activate", function(e) { 
    // do stuff 
});

내 문제는이 activate 이벤트가 결코 발생하지 않는다는 것입니다. 아무도 왜 작동하지 않는지 알고 있습니까? 모든 자습서에서 현재 섹션을 강조 표시하기 위해 탐색 모음을 사용하는 것으로 나타 났지만 실제로는 탐색 모음이 필요하지 않습니다.

출처

2013-08-15 Andrew Hassan

scrollspy에 대한 마크 업은 약간 벗어났습니다. Scrollspy가 실행되지 않아서 결과가 나타나지 않을 수도 있습니다. 필자의 경험에 따르면 scrollspy를 초기화하는 데는 사용자 데이터 속성이 훨씬 쉽습니다. 스크롤 리스너를 본문 자체가 아닌 다른 요소에 추가하면 작업 보고서 하나를 읽지 않았습니다.

이와 같이 신체 태그에 적용해야합니다.

<body data-spy="scroll" data-target="#YOUR NAV CONTAINER">

또한, 당신은 당신의 탐색 구조는 다음과 같이되어 있는지 확인해야합니다

<div id="YOUR NAV CONTAINER"> 
    <ul class="nav"> 
      <li><a href="#SECTIONID">list item</a></li> 
      <li><a href="#SECTIONID">list item2</a></li> 
    </ul> 
</div>

출처

2013-08-15 17:55:09 joshrathke

좋아, 내 페이지에 탐색 구조를 추가했다. 이름이 내'section' 태그의 내용과 일치해야합니까? 이벤트 처리기를 연결하려고 시도했지만 여전히 실행되지 않습니다. –

죄송합니다. 앵커를 추가하는 것을 잊었습니다. 업데이트 된 탐색 구조가 제 대답에 포함되어 있습니다. – joshrathke

부트 스트랩 3 Scrollspy 발사하지 않는 이벤트 활성화

답변

관련 문제