Uncaught TypeError:Object[object object] has no method 'on'

StackOverflow https://stackoverflow.com/questions/15519177

Question

I m going to try this: http://jquerytools.org/demos/scrollable/index.html
But without any event trigger, I m getting below error

enter image description here

But I have confusion about, why the on method not finding in even page load 

<head>
<link href="css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<link href="css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
</head>

Nothing done at javascript part 

<script>
$(function() {
  // initialize scrollable
  $(".scrollable").scrollable();
});
</script>

It stopped my further implementation. Have any idea about this?

Was it helpful?

Solution

JQuery .on method was added in 1.7. You need to update your JQuery as from your screenshot you are currently using 1.6

http://api.jquery.com/on/

Once downloaded from here, change the below where marked

<head>
<link href="css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<link href="css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.min.js"></script> <!-- Change this line -->
<script src="js/jquery.tools.min.js"></script>
</head>

OTHER TIPS

You need to update jQuery version.

Because jQuery 1.6 does not have .on() it's added into new version of jQuery.

You are using jQuery 1.6.1 - on() didn't exist back then (not until 1.7).

Your options:

  • Either you use bind() instead.

  • Or you update to the latest jQuery.

In regard to the second option, replace

<script src="js/jquery-1.6.1.min.js"></script>

with

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top