JQuery UI Аккордеон в динам.заполненный div (div в div) - PullRequest
Новая
       16

JQuery UI Аккордеон в динам.заполненный div (div в div)

1 голос
/ 17 марта 2011

Я новичок в программировании с помощью jQuery.

Я попытался загрузить новый контент в 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();
});

1 Ответ

0 голосов
/ 17 марта 2011

Похоже, вы применяете 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();
});
...