How to Use Multiple jQuery Versions on Same Page
For example, you may be required to upgrade to a newer version of jQuery to use some of the latest features not available in the present jQuery version used on your website. But doing so may break some of the jQuery code on your website. There may be certain functions and code snippets that are supported by older versions of jQuery but not the newer versions. In such cases, you will need to retain both versions of jQuery on your web pages.
You can do this using noconflict mode supported by jQuery. Let us say you want to use two jQuery versions 1.1.2 and 1.9.1. Here is how you need to include them on your web page.
After including the jQuery library’s file you need to immediately call $.noConflict(true) and assign the library version to a separate variable. This variable is used as an identifier to call any function from the correct version.
You will notice that we have defined two jQuery variables jQuery_1_1_2 and jQuery_1_9_1. They are meant to differentiate the functions available in each version. So instead of using $(‘#selector’).function(); you need to do jQuery_1_1_2(‘#selector’).function(); to call the function from version 1.1.2 or jQuery_1_9_2(‘#selector’).function(); if you want to call the function present in version 1.9.2.
This will ensure that there is no conflict in case the same function is present in both jQuery versions.
In this article, we have learnt how to use multiple jQuery versions on same page. The key is to assign $.noConflict(true) to different variables so that there is not conflict.
How to Convert Form Data to JS Object in jQuery
How to Detect Mobile Device Using jQuery
How to Bind Event to Dynamic Elements in jQuery
Remove Unicode Characters from String