jQuery.noConflict()S2C Home « Core & Internals « jQuery.noConflict()

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


Signature Description
jQuery.noConflict([removejQueryNamespace])Free up the jQuery library control of the $ identifier and optionally the jQuery namespace as well.

Parameters


Parameter Description Type
removejQueryNamespaceA boolean representing whether to hold or release the jQuery namespace.

true - release control of the jQuery namespace.

false - keep control of the jQuery namespace.
Boolean

Return

An Object object.

jQuery.noConflict([removejQueryNamespace]) Examplego to top of page 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!);
  });
});

Press the buttons below to action the above code:

Left Button:       Right Button:  


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

Press the buttons below to action the above code:


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

Press the buttons below to action the above code:

Left Button:       Right Button:  


go to home page Homepage go to top of page Top