jScrollPane initialization problem

I already asked this question in the jQuery forum but I didn't get an answer. I've got a problem with the initialization of the jScrollPane plugin. I set up a test site to illustrate it: http://herrmondl.multimediaart.at/_notwebsite/test/test.html

Clicking on a picture should update the entire left DIV. The first time you click on a picture works well but repeating this process makes the "Bio" section disappear. This is definitely because of a wrong initialization of the jScrollPane plugin. If you (re)load the website and click on Urkel at first you'll see the custom scrollbar.

So here's the buggy code for calling the hover and click events:

$('div.artistImg a').hover(function() {

    var currArtist = $(this).parent().find('div.artistName'),
        clicked = $(currArtist).hasClass('artistActive');

    if (!clicked) {
        $(currArtist).stop().css('top', '30px').show().animate({
            "top": "0px"
        }, "fast");
    }
}, function() {
    // if(!$clicked) {
    //       $(currArtist).stop()
    //           .css({
    //               'display': 'block',
    //               'top':'0px'
    //               })
    //           .animate({"top": "30px"}, "fast");    
}).bind('click', function(e) {
    $('div.artistActive').removeClass('artistActive');
    $(this).parent().find('div.artistName').addClass('artistActive');

    $('.artistWrap .artistDates').css('display', 'none');
    e.preventDefault();
    $("div.firstDates").hide().html($(开发者_高级运维this.hash).html()).fadeIn('slow');


    var api = $('.artistBio').jScrollPane({
        showArrows: false,
        verticalGutter: '1',
    });
    api.reinitialise();
});

Basically this code handles a hover animation and the click event. As you can see in the code it should also handle the mouse-out animation which also seems not to work.

Any help to get the initialization right would be appreciated (and if you get the mouse-out stuff working too you will be my hero).

---

I figured it out on my own some time ago. It seems that my .html()-method caused the problem. Using .load() works just fine. So here is the updated code

$(function() {

    $('.artistBio').jScrollPane().data('jsp');

    $('div.artistImg a').hover(function(){

        ...

        },function(){

            ...

        }).bind('click',
            function(e)
            {
                $('div.artistActive').removeClass('artistActive');
                $(this).parent().find('div.artistName').addClass('artistActive');

                $('.artistWrap .artistDates').css('display', 'none');
                e.preventDefault(); 



                // retrieve the current file's url as .load() seems to need it
                var file = location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length);

                $("div.firstDates").hide().load(file + " " + this.hash, 
                        function()
                        {
                            $('.artistBio').jScrollPane().data('jsp').reinitialise();
                        }).fadeIn("slow");



            }

    );

---

There's no reason as far as I can tell to initialize the jScrollPane inside the click function. I carried it outside the click bind and just put it at the top under document.ready and did a little cleanup as well and it now works fine. Here's a link showing how it's set up now: http://jsfiddle.net/WLfGv/