Hit enter after type your search item
Home / jQuery / How to avoid conflict by using jQuery noConflict in JS libraries

How to avoid conflict by using jQuery noConflict in JS libraries

Why using $.Conflict method in jQuery

In your web projects, you may be using different JS libraries for different tasks including jQuery.

Different libraries use an alias for calling its methods or for some other syntax.

The default alias or shortcut used in jQuery is “$” sign. For example:


 

And so on. The “$” is basically an alias of the word “jQuery”.

While using only the jQuery library, there should not be any issue while using “$” as an alias. However, if other JS libraries in your project are also using the “$” alias then there may be conflict in code and some unexpected things may happen.

To avoid this kind of situation, you can use jQuery $.noConflict method to suppress “$” sign and rather using some other sign or keyword to call jQuery methods or selectors etc.

You should use no conflict method as the first line in jQuery code, for example:


 

See the following examples, where I will use difference word as an alias by using the noConflict jQuery method.

An example of using “jQuery” rather than “$”

In this example, an animation is created by using the animate method of jQuery. The first line of code is:


 

After that, the “jQuery” is used rather “$” sign with the methods: button click and animate. As you click the button, the animation will run. See the demo online:

jQuery noConflict

See online demo and code

You can see in the code section, the “$” sign is not used. Instead “jQuery” is used:


 

See the complete code with HTML and CSS in the demo page.

As mentioned earlier, the “$” is an alias of shortcut of “jQuery”. In above example, if you do not use the noConflict method, it will still work.

A demo of using a custom word as alias

As mentioned earlier, you may use a custom word related to your project or website/company name as an alias by using the jQuery $.noConflict  method.

In this example, I am using “jdemo” as an alias. At the click event of the button, the addClass method of jQuery executes that adds a CSS class to the div element. See the demo online:

jQuery noConflict addClass

See online demo and code

This is how it was done in the jQuery code:


 

By simply declaring a variable, the noConflict method is assigned to that variable. The variable name acts as an alias in the rest of program.

An example to use $.noConflict with $.each method in HTML menu

In this demo, a menu is created by using the <div>, <ul>, <li> and <a> tags with some CSS. As you click the button, the each method of jQuery is executed by using an alias: “jqeach”. The alias is used in other methods as well instead of “$” sign.

The jQuery each method will trigger an alert showing the text of each menu item.

See the demo online by the given links below:

jQuery noConflict menu

See online demo and code

This is how the “jqeach” is used in jQuery code:


 

A precautionary note

As using the noConflict method in your program to replace ‘$” with “jQuery” or a custom alias, be careful if you are using third party plug-ins or other jQuery code that still used the “$”. Generally, it should not cause any problems due to scope; however, sometimes you may see unexpected results.

This div height required for enabling the sticky sidebar