TypeError: $(...).on is not a function

Question

I am using jQuery litebox. After adding JS and CSS files I got this error TypeError:

$(...).on is not a function at this line in js file                                             "return  $('body').on('click',        'a[rel^=lightbox], area[rel^=lightbox]', function(e) {"  

Can anybody help me to understand the problem here?

I am doing this implementation in CakePHP 1.3.

Answer 1

The problem may be if you are using older version of jQuery. Because older versions of jQuery have 'live' method instead of 'on'

Answer 2

The usual cause of this is that you're also using Prototype, MooTools, or some other library that makes use of the $ symbol, and you're including that library after jQuery, and so that library is "winning" (taking $ for itself). So the return value of $ isn't a jQuery instance, and so it doesn't have jQuery methods on it (like on).

You can use jQuery with those other libraries, but if you do, you have to use the jQuery symbol rather than its alias $, e.g.:

jQuery('body').on(...); 

And it's usually best if you add this immediately after your script tag including jQuery, before the one including the other library:

<script>jQuery.noConflict();</script> 

...although it's not required if you load the other library after jQuery (it is if you load the other library first).

Using multiple full-function DOM manipulation libraries on the same page isn't ideal, though, just in terms of page weight. So if you can stick with just Prototype/MooTools/whatever or just jQuery, that's usually better.