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();
});
精彩评论