jQuery: jScrollHorizontalPane - Adding content dynamically

Question

I have a set of images in a jScrollHorizontalPane and I want to be able to change the content of the pane per project.

Currently this is what I have loading every time a project is selected:

    $.each(project.images || [], function()
{
    if(this == "") return;
    imgCont.append('<div class="image-item"><img height="225" src="' + this + '" /></div>');
});
var width = 0;
imgCont.find('img').each(function()
{
    width += $(this).width();
});
imgCont.width(width);
$('#project-images-scroll').jScrollHorizontalPane (
    {
        scrollbarHeight:10, 
        scrollbarMargin:0,
        reset:true,
        animateTo:false,
        animateInterval:25,
        animateStep:5
    }
);

But what ends up happening is the scroll bar is reset but not working when clicked.

Any help on this would be greatly appreciated.

Answer 1

The way to fix this was by cloning the entire tree of the scroller. Then on each instance of changing content the entire tree should be .remove() 'd and reinitialized from a clone of the clone.