jScrollPane not working when contents are loaded by .load()

Question

I am trying to use jScrollPane on a UL which contents are loaded dynamically using a .load(), however the jScrollPane is not showing at all ..

            <ul class=scroll-pane>
                <li>.</li>
            </ul>
            <script>
                $(document).ready(function(){
                    $('.scroll-pane').jScrollPane({showArrows: true});
                    $(".twitterFeeds ul").load('./Includes/tjcgTwitterFeeds.php?randval='+ Math.random());
                    var refreshId = setInterval(function() {
                            $(".twitterFeeds ul").fadeOut(100);
                            $(".twitterFeeds ul").load('./Includes/tjcgTwitterFeeds.php?randval='+ Math.random());
                            $(".twitterFeeds ul").fadeIn(100);
                            $('.scroll-pane').jScrollPane();
                    }, 10000);
                }); 
            </script>

Answer 1

Call the plugin in the .load callback instead:

var url = './Includes/tjcgTwitterFeeds.php?randval='+ Math.random();
$(".twitterFeeds ul").load(url, function() {
    $('.scroll-pane').jScrollPane({showArrows: true});          
});