开发者

jQuery UI Accordion in dyn. filled div ( div in div)

开发者 https://www.devze.com 2023-02-18 10:22 出处:网络
I\'m new in programming with jQuery. I tried to load new content in a div called \"container\". The new content has a div included, which should be shown as jQuery UI Accordion.

I'm new in programming with jQuery.

I tried to load new content in a div called "container". The new content has a div included, which should be shown as jQuery UI Accordion.

The content change works fine, but the accordion isn't shown. How can i apply the Accordion on the loaded div?

Code (inspired by: 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();
});


It looks like you are only applying the accordion on $(document).ready.

You need to call accordion() after you load your new content:

$(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();
});
0

精彩评论

暂无评论...
验证码 换一张
取 消