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

Question

Can anyone help me to figure this out ?

When I use the latest (or a newish) version of jQuery, the small script below works fine. However, when I use older versions of jQuery, my script says that the on function does not exist.

Here is my script that doesn't work with older versions of jQuery:

$(document).ready(function () {
    $(".theImage").on("click", function(){
        // In the event clicked, find image, fade slowly to .01 opacity
        $(this).find("img").fadeTo("slow", .01).end()
        // Then, of siblings, find all images and fade slowly to 100% opacity
               .siblings().find("img").fadeTo("slow", 1);           
    })
})

Any kind of help is appreciated.

Aelios · Accepted Answer · 2013-04-23T13:14:26.750

75

You must use bind instead of on, as on was only introduced in jQuery 1.7.

$(document).ready(function () {
    $(".theImage").bind("click", function(){
        // In the event clicked, find image, fade slowly to .01 opacity
        $(this).find("img").fadeTo("slow", .01).end()
        // Then, of siblings, find all images and fade slowly to 100% opacity
        .siblings().find("img").fadeTo("slow", 1);           
    })
})

edited Apr 23 '13 at 13:14

answered Jun 06 '12 at 10:25

Aelios

11,849
2
36
54

1

Woah that was quick man... 12 minutes until I can accept an answer. I'll check it as correct... works great! – dvlden Jun 06 '12 at 10:26
@Christoph the user is asking why his code (with `.on()`)is not working with older version of jQuery... so this answer is fine – Fabrizio Calderan Jun 06 '12 at 10:27
But bind doesn't have the same behaviour as .on, which is why the op presumably used .on rather than .click? .live is the alternative – Alex Jun 06 '12 at 10:27
4

@Alex - In this case, `bind` and `on` function in the same way. No selector is being passed to `on`, which would cause it to delegate the event handler. – James Allardice Jun 06 '12 at 10:27
7

@F.Calderan The answer doesn't address the *why* of it at all, though the question never specifically asks why. It just says "this is the fix", without explaining what the original problem was; I'll let people decide for themselves whether that constitutes a full answer. – Anthony Grist Jun 06 '12 at 10:34
1

of course everyone chooses for themselves :) to me is fine because it solves the problem - and it was a reply to a deleted comment – Fabrizio Calderan Jun 06 '12 at 10:35

score 3 · Answer 2 · edited Oct 31 '13 at 11:46

3

You could use delegate(), for example:

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

This is equivalent to the following code written using on():

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

edited Oct 31 '13 at 11:46

Aelios

11,849
2
36
54

answered Mar 14 '13 at 03:46

raycchan

313
1
5
9

Whilst the equivalences you describe in your answer are correct, `delegate()` is *not* equivalent to the OP's usage of `on()` in the question (he attaches the element directly to the `.theImage`, where as you delegate to another element). – Matt Apr 21 '13 at 15:52
FYI: as of jQuery 1.7 `delegate()` has been superseded by `on()` – JSmyth Nov 24 '13 at 07:34

score 1 · Answer 3 · edited Apr 21 '13 at 15:52

1

You must use jQuery version 1.7+ to use on(). bind() is deprecated.

edited Apr 21 '13 at 15:52

Matt

74,352
26
153
180

answered Feb 27 '13 at 15:43

Mohammad Rahmani

227
1
10

Thank you, don't know why people downvoted this but I placed 1.7 and it worked! – Faizan May 18 '13 at 16:51

score 0 · Answer 4 · edited Sep 18 '13 at 08:27

0

Change the on function to bind:

.children().on("click",function()
to
.children().bind("click",function()

edited Sep 18 '13 at 08:27

Alfe

56,346
20
107
159

answered Apr 21 '13 at 15:19

Devendra Singh Bhandari

555
4
14

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

4 Answers4

Linked