TypeError: 'undefined' is not a function (evaluating '$(document)')

Question

1. I\'m using a WordPress site.
2. I\'m including this script in the header.

When the script loads, I get this error:

TypeErro

Answer 1

Try this snippet:

jQuery(function($) {
  // Your code.
})

It worked for me, maybe it will help you too.

Answer 2

Wordpress uses jQuery in noConflict mode by default. You need to reference it using jQuery as the variable name, not $, e.g. use

jQuery(document);

instead of

$(document);

You can easily wrap this up in a self executing function so that $ refers to jQuery again (and avoids polluting the global namespace as well), e.g.

(function ($) {
   $(document);
}(jQuery));

Answer 3

I ran into this problem also when including jQuery in my page header, not realizing the host was already including it in the page automatically. So load your page live and check the source to see if jQuery is being linked in.

Answer 4

I would use this

(function ($) {
   $(document);
}(jQuery));

Answer 5

Also check for including jQuery, followed by some components/other libraries (like jQuery UI) and then accidentially including jQuery again - this will redefine jQuery and drop the component helpers (like .datepicker) off the instance.

Answer 6

wrap all the script between this...

<script>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
      // Code that uses jQuery's $ can follow here.
    });
</script>

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.