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.

Dodger

You did include jQuery version 1.7 or newer, and you did wrap your code in document.ready right ? – Jeaninejeanlouis

Yes i have added jquery 1.7 – Dodger

i havent implement any code for lightbox yet, if i just add js and css files i got this error – Dodger

@user1613870: So you're saying that the code you've quoted isn't yours? Where did it come from, then? – Dymoke

@Crowder that code is from lightbox.js, the library i am using, on this line i am get error – Dodger

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'

Konstantine

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.

Dymoke

Crowder, thanks for you guidelines, i am not adding any library before jquery, all the libraries have been added after jquery library. i am using this technique <?php echo $html->css ( 'skin/lightbox.css', 'stylesheet' ); ?> and <?php echo $html->script(array('libs/lightbox'), array('inline' => false)); ?> – Dodger

@user1613870: As I said, if you're including another library after jQuery (like Prototype or MooTools), you'll have this problem. (Not if you put them in before; if you did them before, you'd have a different problem.) Are you using Prototype or MooTools? – Dymoke

noConflict did nothing for me... but jQuery('body').on(...); FIXED the problem ... thanks! Will know now :) – Fatuous

Answer 3

This problem is solved, in my case, by encapsulating my jQuery in:

(function($) {
//my jquery 
})(jQuery);

Whitethroat

Can you please explain what do you mean by my jQuery? do you mean it jQuery version x.x.x or jQuery cycle.all or the script you are writing ? – Nebulize

I think he meant the script and yes encapsulating my script around that function actually solved my problem – Dinitrobenzene

Answer 4

If you are using old version of jQuery(< 1.7) then you can use "bind" instead of "on". This will only work in case you are using old version, since as of jQuery 3.0, "bind" has been deprecated.

Dicker

Answer 5

I tried the solution of Oskar (and many others) but for me it finaly only worked with:

jQuery(function($){
   // Your jQuery code here, using the $
});

See: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Tailgate

You're a legend given my scenario. Thank you. – Nebulize

Answer 6

In my case this code solved my error :

(function (window, document, $) {
            'use strict';
             var $html = $('html');
             $('input[name="myiCheck"]').on('ifClicked', function (event) {
             alert("You clicked " + this.value);
             });
})(window, document, jQuery);

You don't should put your function inside $(document).ready

Alanna