Scrollpane not working on one div but is on another - both dynamic content

Question

Been looking at this for hours...scrollpane is working on a div (#search_results), but not on another div with dynamically loaded content via Ajax, despite reintializing scrollpane. You can see the site at 130.95.21.121/museum/search.php

Click on the System checkbox and choose digestive system and in the next menu select Liver and click search. You will see that scrollpane appears fine in that div (#search_results). Then click on a few links in #search_results div to get some content longer than #specimen_content_left where the content loads (eg T56.M57413). Despite have overflow:auto on that div and wrapping the dynamic content with <p></p> as:

$('#search_results').on('click', '.specimen_link', function(){
$.ajax({
        type: "POST",
        url: 'scripts/get_specimen.php',
        data: {
            specimen: $(this).attr("data-link"),
        },
        success: function(data) {
            $('#specimen_content_left').html('<p>' + data + '</p>');
            $('#specimen_content_left').jScrollPane({autoReinitialise: true});
            }
});
});

overflow shows as hidden in the Firefox inspector. Tried setting overflow:auto !important and the standard scrollbars show, but no scrollpane.

Any ideas?

Answer 1

Not an answer to this problem with jscrollpane, but nevertheless a solution.

I decided to use Malihu Jquery custom content scroller and it works perfectly. Highly recommend this as an alternative to scrollpane which doesn't seem to have much in the way of active support, either here, Github or by the developer. You can get it from http://manos.malihu.gr/jquery-custom-content-scroller/