TypeError: jQuery(...).ready(...) is not a function

Question

OK, I know this has been asked before but none of the answers seems to apply to my case. I'm trying to get a very tiny piece of jQuery running (I'm just getting started on it).

jQuery(document).ready(function(){
    jQuery('.comtrig').on('click',function(){
        $(this).next().animate({'display':'inline'},1000);
    });
})();

I get the error TypeError: jQuery(...).ready(...) is not a function in FF or Uncaught TypeError: object is not a function in Chrome.

Solution 1 was to replace $ with jQuery but I obviously already did that as shown above
I'm not in Wordpress either
I'm using only jQuery and the above mini script, no other JS
jQuery itself seems to load fine

What am I missing here?

What happens if you type $ or jQuery into console in browser? — Purple Hexagon
– Purple Hexagon, Commented Feb 13, 2014 at 13:19
Just to be sure, are you loading jQuery before your jQuery(...).ready(...) call? — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 13, 2014 at 13:19

Jai · Accepted Answer · 2014-02-13 13:28:11Z

48

try to remove this (); at the end of doc ready:

jQuery(document).ready(function(){
  jQuery('.comtrig').on('click',function(){
    $(this).next().animate({'display':'inline'},1000);
  });
}); //<----remove the (); from here

(); is normally used to have a Immediately-Invoked Function Expression (IIFE) which has some kind of syntax like this:

(function(){
   // your stuff here
})(); //<----this invokes the function immediately.

Your errors:

in firefox = TypeError: jQuery(...).ready(...) is not a function

in chrome = Uncaught TypeError: object is not a function

because:

Your document ready handler is not a Self-executing anonymous function.

edited Feb 13, 2014 at 13:28

answered Feb 13, 2014 at 13:21

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RubenGeert Over a year ago

@Jai: I see! () is included for a SIAF and the $(document).ready syntax is NOT a SIAF. Thanks, that's a helpful disambiguation you wrote.

Jason P Over a year ago

@RubenGeert When you call .ready(function() { ... }), you are calling ready() and passing an anonymous function as a parameter. When you call .ready(function() {...})(), you are doing the same as the above, but then trying to execute the result of ready() as a function. .ready() returns a jquery object, which is not a function.

Jai Over a year ago

@RubenGeert see Self-executing anonymous function or Immediately-Invoked Function Expression used to have some special syntax to do this, while jQuery is desined and developed that way, so there is no need to do this in your case, although you can make a closure to save your $ alias to jQuery for use in your closure if you have used multiple libraries which uses the $.

Jai Over a year ago

@downvoter why downvote after 12 upvotes. i guess it really needs a comment for that right.

Jai Over a year ago

@downvoter well i get a second downvote i don't know why?

Nathan Dawson · Accepted Answer · 2014-02-13 13:30:19Z

8

There are two issues in the code.

1 - The brackets at the end of the code.

2 - $(this) should have been jQuery(this) or $ inside function.

jQuery(document).ready(function($){
    $('.comtrig').on('click',function(){
        $(this).next().animate({'display':'inline'},1000);
    });
});

edited Feb 13, 2014 at 13:30

answered Feb 13, 2014 at 13:19

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

2 Comments

Niet the Dark Absol Over a year ago

But you completely failed to explain WHAT you changed, and WHY you changed it. Maybe if you'd explained, people would have taken a moment to understand...

Satpal Over a year ago

I completely agree with @NiettheDarkAbsol, Yours is first correct answer, but without explanation

Satpal · Accepted Answer · 2014-02-13 13:23:03Z

3

Remove the extra brackets () at the end. Keep the code as below.

jQuery(document).ready(function(){
    jQuery('.comtrig').on('click',function(){
        $(this).next().animate({'display':'inline'},1000);
    });
}); // <== remove () from here

edited Feb 13, 2014 at 13:23

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Feb 13, 2014 at 13:21

user3242956

711 silver badge5 bronze badges

Comments

sairfan · Accepted Answer · 2015-06-23 19:12:27Z

1

Passing jquery object this way works for me.

$(document).ready(function () {
    console.log("jquery");
}(jQuery));

answered Jun 23, 2015 at 19:12

sairfan

1,0822 gold badges14 silver badges22 bronze badges

Comments

Waleed Chayeb · Accepted Answer · 2016-08-07 20:01:00Z

0

These Errors:

    TypeError: jQuery(...).ready(...) is not a function
    or
    Uncaught TypeError: object is not a function

are also happens if you implement Jquery library after your code, it should be before, ORDER MATTER here.

 <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>

answered Aug 7, 2016 at 20:01

Waleed Chayeb

316 bronze badges

Collectives™ on Stack Overflow

TypeError: jQuery(...).ready(...) is not a function

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related