자식 div가 호출 될 때 JscrollPane div가 작동하지 않습니다.

Question

"master"div에서 JscrollPane을 사용하고 해당 div 내에서 자식 div에 내용을 저장합니다. jQuery show/hide를 사용하여 내용 onClick을로드하지만 하위 div는 표시되지 않습니다. 내가 JScrollPane의를 제거하면 그것을 잘 :(

HTML 작동합니다!

<h3 onclick="internalNav('testTwo')">Click to see Div Two</h3> 
     <div id="content" class="scroll-pane"> 
      <div id="testOne"> 
       <h1>Title 1</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
      do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div> 

      <div id="testTwo"> 
       <h1>Title 1/h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
      do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div> 
     </div> 

JS 내가 여기에 무엇이 잘못 볼 수 없습니다

$(document).ready(function(){ 

    //Hide all divs, then show first div 
    $("#content > div").hide() 
    $("#content > div:first").show() 

$(function(){ 
    $('.scroll-pane').jScrollPane(); 
}); 

}); 


function internalNav(divId) { 

    $("#content > div").not('#' + divId).hide() 
    $('#' + divId).fadeIn() 


} 

을 당신이 필요

Answer 1

을 jScrollPane을 다시 초기화 (또는 해당 내용의 가시성 변경). N 예 :

http://jscrollpane.kelvinluck.com/invisibles.html

또한, 난 당신이 document.ready 블록 내부의 $(function() 블록을 알 수 있습니다. 추가 블록이 필요하지 않습니다. 이미 document.ready 블록 안에 있기 때문에 jScrollPane을 직접 적용 할 수 있습니다.

참고로 h3에서 onclick 속성을 사용하는 것은 우수 사례로 간주되지 않습니다. 대신 jQuery를 사용하여 이벤트 리스너를 추가 할 수 있습니다.

<h3 class="internal-nav" rel="testTwo">Click to see Div Two</h3> 

:로 대체하여 HTML에서 H3으로

$('.internal-nav').bind(
    'click', 
    function(e) 
    { 
     var divId = $(this).attr('rel'); 
     // Notice no spaces around the ">" - this will help if you have nested divs 
     $("#content>div").not('#' + divId).hide(); 
     $('#' + divId).fadeIn(
      function() 
      { 
       $('.scroll-pane').jScrollPane() 
      } 
     ); 

    } 
); 

:이 reinitialisation 모두를 보여주고 바인딩 청소기 이벤트를 사용하는 예입니다