Dynamically added elements don't load in my jQuery slider

My page currently uses Slides

I want to be able to add new "slides" to my slider dynamically. The way I do this is through an XML document, which contains a link to the "slide image" and the href.

My jQuery code to dynamically add elements is this:

jQuery.ajax({
    type: "GET",
    url: "xml/slider_non_flash_images.xml",
    dataType: "xml",
    success: function(xml) {
        jQuery(xml).find('image').each(function() {
            var image开发者_如何学Gosrc = jQuery(this).find('src').text();
            var url = jQuery(this).find('href').text();
            var item = '<div><a href="' + url + '"><img src="' + imagesrc + '"/></a></div>';
            jQuery('.slides_container').append(item);
        });
    }
});

This all works, and adds the divs to the slides containing div. The problem is, the slide doesn't work.

If I hard code the <div> elements within the container myself, they load just fine.

Could this be a "timing" issue? Where the elements are loaded after the slider attemps to run? And if so, how can I add them prior to. This all happens in the (document).ready method. Is there something sooner?

Thanks.

I'm sure someone will ask, so here's the code to start the slider.

jQuery('#slides').slides({
    preload: true,
    preloadImage: 'images/loader.gif',
    play: 8000,
    effect: 'fade',
    pause: 15250000,
    slideSpeed: 8000,
    crossfade: true,
    fadeEasing: "easeOutQuad",
    hoverPause: true
});

Most sliders scan the DOM for currently existing elements only onload. If the DOM is changed (i.e. dynamically with ajax), you may have to re-initialize the slider. How to do this will be different for each slider plugin.

You could try putting the $('#sliders').slides(...) call into a function, calling that function on pageload, then re-calling that function whenever the DOM is changed by ajax.

check out http://api.jquery.com/live for more details on the live function