Login

Using $ outside of a closure ($ is not defined or is not a function)

jQuery/javascript errors · No animations · Styles don't look like the demo · UberMenu

When you’re using a modular system like WordPress, it’s important that all jQuery is compartmentalized and running in noConflict mode in order to avoid conflicts. When other themes/plugins don’t follow this standard, you’ll get jQuery errors that break other scripts, like UberMenu.

Details

Background

When you’re using a modular system like WordPress, it’s important that all jQuery is compartmentalized and running in noConflict mode in order to avoid conflicts. Best practice dictates that no jQuery code should be using the $ variable outside of a closure.

Incorrect

//ERROR - $ called outside of closure
$( document ).ready( function(){
  $( '#mydiv' ).fancypants();
});

Correct

//jQuery is addressed as 'jQuery' outside of closures - remember to be polite in public
jQuery( document ).ready( function( $ ){
  //Using $ within the closure makes kittens sing
  $( '#mydiv' ).fancypants();
});

The Problem

When other plugins use the $ variable to address jQuery outside of a closure, this causes a javascript error. Javascript errors break things.

Identifying the issue

Take a look at your javascript console. If a javascript error is printed there and says something along the lines of ‘$’ is undefined or ‘$’ is not a function, this is likely your issue.

The Solution

Settings Check (UberMenu 2 only)

By default, noConflict Mode in UberMenu’s Control Panel > Theme Integration > Run jQuery in noConflict Mode is disabled by default. If you have enabled it, it may be causing this issue if your theme/plugin javascript is not following best practices. Disable it.

Fix the JS

If a plugin or theme is loading javascript that accesses the $ variable outside of a closure, it’ll need to be fixed. Replace $ calls outside of closures with jQuery instead. Plugin and theme authors not following this standard should update their code.