Use of jQuery noConflict();

In my short time of using jQuery I've come across the invaluable method of noConflict(). Why is it so handy? Well, in the world of web design and development, there are lots of very useful JavaScript libraries out there (i.e. YUI, MooTools, Prototype) and several of them use "$" to represent an object. If you are using this syntax within jQuery and another conflicting library simultaneously, you are likely going to run into some unexpected behavior.

Luckily noConflict() is very simple to use and you won't have to go swapping out all your "$" with "jQuery". And to keep it simplistic I'll use the following code to show you how to implement it.

$(function() {
  $("#foo").click(
    // your code here
  )
 
  // any additional code
});

NOTE: If you aren't familiar with the shorthand form $(function() { ... }); of $(document).ready(function() {...}); please read my blog post entitled Still using $(document).ready in your jQuery scripts?

Given the above example, here's how we'd implement the noConflict() method, which allows you to keep using "$" throughout your source:

jQuery.noConflict();
 
jQuery(function($) {
  $("#foo").click(
    // your code here
  )
 
  // any additional code
});

Pretty slick, eh? It's like magic and just another reason I love me some jQuery. If you have any questions, don't hesitate to post a comment.

UPDATE: See Paul Irish's comment for an even slicker way!

Visitor's picture
Paul Irish commented on #1

if you wanna get really fancy...

(jQuery.noConflict())(function($) {
  $("#foo").click(
    // your code here
  )
 
  // any additional code
});
Cory's picture
Cory commented on #2

Thanks for the tip. Looks like I'll be using that instead. ;)

Visitor's picture
Visitor commented on #3

I ran across this a few weeks ago for shortening the jQuery() call:

var $j = jQuery.noConflict();
$j("#mydiv").hide();

You get the idea..

-KeithP

Cory's picture
Cory commented on #4

This is the way I actually used to do it, but have since moved to the method described above. Definitely an option though.

Visitor's picture
YourCustomBlog: WordPress Consultant commented on #6

Your example helped me to solve a conflict in WordPress between jQuery and mooTools (Featured Content Gallery). Thanks for the useful info -- much appreciated.

Visitor's picture
Visitor commented on #7

Great tip, It helped me a lot. Thank You

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><img>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <css>, <drupal>, <java>, <javascript>, <mysql>, <php>, <ruby>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA

This question is for testing whether you are a human visitor and to prevent automated spam submissions.