jQuery script gives 'undefined is not a function' console error in WordPress

Question

This jquery snippet works fine in JSfiddle...

        jQuery(document).ready(function() {
        jQuery(".link").click(function() {
        jQuery('.content-container div').fadeOut('slow');
        jQuery('#' + $(this).data('rel')).fadeIn('slow');
      });
    });

But when I insert it into the footer of my WordPress site I get the following error...

Uncaught TypeError: undefined is not a function

anyone any ideas what I am doing wrong?

Can confirm that jQuery is loaded fine on the site and working correctly — fightstarr20, Oct 22 '14 at 08:45
@fightstarr20 Assuming that the exception is thrown from that context (ie. not inside another function), either `jQuery` or `$` evaluates to undefined or to a non-jQuery value. This is easy to test. — user2864740, Oct 22 '14 at 08:48

score 1 · Accepted Answer · edited May 23 '17 at 10:28

1

Answer from 7975203:

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));

edited May 23 '17 at 10:28

Community

1
1

answered Oct 22 '14 at 08:45

Davide Pastore

8,678
10
39
53

1

The OP *does* use `$(this).data` - as such, this answer seems relatively sensible. (Unfortunately it's hard to know "for sure" with such an under-specified error/question.) – user2864740 Oct 22 '14 at 08:46
You are right, can't believe I missed this one. Thanks! – fightstarr20 Oct 22 '14 at 08:47
1

@Jivings reread the question. – Davide Pastore Oct 22 '14 at 08:47

jQuery script gives 'undefined is not a function' console error in WordPress

1 Answers1