Why won’t my jQuery work on WordPress?

I was having trouble with the demo from my jQuery plugin design pattern demo article, so I did a little research. I’d always had concerns with interoperability between the Prototype and jQuery toolkits, but never really fully understood why.

Fortunately, Chris Coyier has written an excellent article that touches on the subject. Basically, there is a conflict with the built-in dollar-sign operator that is used by both toolkits (having limited exposure to Prototype I was unaware of this).

Normally, with jQuery’s architecture, this isn’t an issue because the publicly exposed dollar-sign reference is encapsulated and is only accessed from within other self-contained plug-ins. But when you jQuery is called from outside a plug-in reference it will cause a conflict with Prototype.

The way around this is to assign a slightly customized handle when one instantiates their jQuery object and to do so by calling the “noConflict()” method when so doing. In Chris Coyier’s article, he uses $j, but one could use just about anything.

var $j = jQuery.noConflict();

$j("#the-example").addHoverFade();

Published by

Tom Cornyn

I'm just a regular guy. I eat tires.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s