2011-03-16 2 views
1

Я новичок в программировании с помощью jQuery.jQuery UI Аккордеон в дин. заполненный div (div в div)

Я попытался загрузить новый контент в div под названием «container». Новый контент содержит 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

Похоже, вы только применяя accordion на $(document).ready.

Вам нужно позвонить 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(); 
}); 
Смежные вопросы