December 25, 2024
How to use two jQuery version without conflict
Sometimes, it becomes necessary to use two different versions of jQuery in a project. However, this can lead to conflicts between the versions. To prevent such issues, we can create separate jQuery objects for each version, allowing them to work independently without interference. Here's an example:
Sample Code
<html>
<head>
<title>Using Two jQuery Versions</title>
<!-- Load the first version of jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// first jQuery version variable
var jQueryOldObj = jQuery.noConflict(true);
</script>
<!-- Load the second version of jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// second jQuery version variable
var jQueryNewObj = jQuery.noConflict(true);
// Example of both versions
jQueryOldObj(document).ready(function () {
jQueryOldObj('body').append('Using jQuery version 1.12.4
');
});
jQueryNewObj(document).ready(function () {
jQueryNewObj('body').append('Using jQuery version 3.6.4
');
});
</script>
</head>
</html>