jQuery.noConflict() JQ Home  <<  Core & Internals  <<  jQuery.noConflict()

• <<    jQuery.holdReady()
• jQuery.readyException()     >>

Remove jQuery variables from the global scope.

Shorthand version $.noConflict()

Description

The jQuery.noConflict() method allows us to free up the jQuery library control of the $ variable and optionally the jQuery namespace as well.

Syntax

Parameters

Return

An Object object.

jQuery.noConflict([removejQueryNamespace]) Example Core  <<  Top

Free up the jQuery library control of the $ global variable and optionally the jQuery namespace as well.

There are other JavaScript libraries such as Prototype that also use the $ symbol as a global identifier. To address this conflict and optionally remove the jQuery namespace as well we can use the jQuery.noConflict() Method.

Releasing the $ Global Identifier

In this example we release the $ global identifier for use by other libraries and addons.

$.noConflict(); // Here we free up the $ global identifier
jQuery(function(){ // Using jQuery Namespace
  jQuery('#btn1').on('click', function(){
    alert('Using jQuery namespace this works');
  });
  $('#btn2').on('click', function(){  // $ global identifier freed so no action
    alert(Never Actioned!);
  });
});

Releasing And Using The $ Global Identifier In Function Scope

In this example we release the $ global identifier for use by other libraries and addons. We then declare it within function scope where it can be used as normal even though the original $ global identifier is not available.

How does this work? Because we are passing a function to the jQuery function we are declaring it as a ready event handler. We also declare the $ identifier as a single parameter being passed to the ready event handler. jQuery always passes a reference to the jQuery object as its sole parameter to the ready event handler. Therefore the $ identifier actually refers to jQuery inside of the ready event handler irrespective of any definition outside the function scope.

$.noConflict(); // Here we free up the $ global identifier
jQuery(function($){ // We pass the $ global identifier as a parameter
  $('#btn3').on('click', function(){
    alert('This works using the function scoped $ variable');
  });
});

Releasing the jQuery Namespace

In this example we release the $ global identifier for use by other libraries and addons. We also set the optional parameter to true to release the jQuery namespace while creating a new one.

var jq = {};
jq.query = jQuery.noConflict(true); // Create new namespace
jq.query(function(){ // Using new namespace
  jq.query('#btn4').on('click', function(){
    alert('Using jq.query namespace this works');
  });
  jQuery('#btn5').on('click', function(){ 
    alert('Using jQuery namespace does not work!'); //jQuery namespace freed so no action
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 2 - jQuery Core & Internals

• <<    jQuery.holdReady()
• jQuery.readyException()     >>