In this article I will explain with example, how to use multiple jQuery versions on the same page using jQuery noConflict function.
jQuery noConflict function allows to specify different variable names to the jQuery versions and this makes multiple versions work together without conflicting.
Why do we need multiple versions?
Multiple versions are needed in cases where you wish to upgrade or downgrade but the two jQuery versions have some functionalities missing.
For example, Live function has been removed from jQuery 1.9 onwards and let’s say I want to upgrade jQuery to use some plugin, I will have to remove Live function from my code.
The Problem
Now what happens if I use multiple versions without using jQuery noConflict. In the below example, I am first inheriting jQuery 1.8.3 and then jQuery 2.1.3.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$("#Button1").live("click", function () {
alert("Button1 clicked.")
});
$(function () {
$("#Button2").click(function () {
alert("Button2 clicked.")
});
});
</script>
<input type="button" id="Button1" value="Button1" />
<input type="button" id="Button2" value="Button2" />
</body>
</html>
Here as soon as jQuery 2.1.3 is loaded it takes up the $ variable and the version changes 2.1.3 and when I am executing this page I am getting the following error.
![jQuery noConflict: Using multiple jQuery versions on the same page]()
The Solution
The solution is to assign different variable names to each version. In the below example, I have assigned $j as variable name to the jQuery 2.1.3 using jQuery noConflict.
Thus now $ corresponds to jQuery 1.8.3 while $j corresponds to jQuery 2.1.3.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var $j = $.noConflict(true);
</script>
<script type="text/javascript">
$("#Button1").live("click", function () {
alert("Button1 clicked.")
});
$j(function () {
$j("#Button2").click(function () {
alert("Button2 clicked.")
});
});
</script>
<input type="button" id="Button1" value="Button1" />
<input type="button" id="Button2" value="Button2" />
</body>
</html>
Using jQuery noConflict, the Live function works perfectly.
![jQuery noConflict: Using multiple jQuery versions on the same page]()
Demo
Downloads
