2011-03-16 24 views
1

私はjQueryを使ったプログラミングでは新しいです。jQuery UI dynのアコーディオン。 fill div(div in div)

"container"という名前のdivに新しいコンテンツを読み込もうとしました。新しいコンテンツにはdivが含まれており、jQuery UI Accordionとして表示する必要があります。

コンテンツの変更はうまくいきますが、アコーディオンは表示されません。ロードされたdivにアコーディオンを適用するにはどうすればよいですか? (:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/に触発さ):

コード

$(document).ready(function() 
{ 
     $('#navlist li a').click(function() 
     {        
      var toLoad = $(this).attr('href'); 
      $('#container').hide('fast',loadContent); 
      $('#load').remove(); 
      $('#page').append('<span id="load">LOADING...</span>'); 
      $('#load').fadeIn('normal'); 
      function loadContent() 
      { 
       $('#container').load(toLoad,'',showNewContent()); 
      } 
      function showNewContent() 
      { 
       $('#container').show('normal',hideLoader()); 
      } 
      function hideLoader() 
      { 
       $('#load').fadeOut('normal'); 
      }  
      return false; 
     }); 


     $("#accordion").accordion(); 
}); 

答えて

0

だけ$(document).readyaccordionを適用しているように見えます。

あなたはあなたの新しいコンテンツをロードした後accordion()を呼び出す必要があります:

$(document).ready(function() 
{ 
     $('#navlist li a').click(function() 
     {        
      var toLoad = $(this).attr('href'); 
      $('#container').hide('fast',loadContent); 
      $('#load').remove(); 
      $('#page').append('<span id="load">LOADING...</span>'); 
      $('#load').fadeIn('normal'); 
      function loadContent() 
      { 
       $('#container').load(toLoad,'',showNewContent()); 
      } 
      function showNewContent() 
      { 
       // ADD THIS: 
       $('#container #accordion').accordion(); 
       $('#container').show('normal',hideLoader()); 
      } 
      function hideLoader() 
      { 
       $('#load').fadeOut('normal'); 
      }  
      return false; 
     }); 


     $("#accordion").accordion(); 
});