TypeError: $(...).perfectScrollbar is not a function - perfect-scrollbar

Question

I am trying to createa "Perfect Scrollbar" using this:
https://noraesae.github.io/perfect-scrollbar/
With the most simple possible code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery.");
$('#msgid').perfectScrollbar();
});
</script>
<div id="msgid"></div>
And I have the followin error:
TypeError: $(...).perfectScrollbar is not a function
Of course every js/css is pointing to the right direction, if needed you can see it live here:
http://florida.red111.net/a.html
Looks like jQuery is not recognizing the library,
Any ideas?
Thanks in advance.

Answer 1

You might not have the jQuery enabled version. This code worked for me:
<title>Test</title>
<!-- META -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SCRIPTS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/min/perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
console.log('HELLO!');
$('.id-parent').perfectScrollbar();
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/css/perfect-scrollbar.min.css" />
<style type="text/css">
.id-parent {
position: relative;
overflow: auto;
height: 200px;
}
.id-child {
height: 1000px;
}
</style>
</head>
<div class="id-parent">
<div class="id-child">
<h1>Content goes here</h1></div>
</div>

Answer 2

I was also having the same issue. I was calling the perfectScrollbar function before it's declaration. Changing the order worked for me.

Answer 3

I had the same issue. I was using perfect-scrollbar.jquery.js with jQuery 1.6.1. After updating jQuery to 2.1.4, the error disappeared and everything worked as expected!
Try updating jQuery, it solved the problem in my case.

Answer 4

Just update your perfect scrollbar on 0.5.2 version.
It's work for me.