Can I use multiple versions of jQuery on the same page? Can I use multiple versions of jQuery on the same page? jquery jquery

Can I use multiple versions of jQuery on the same page?


Yes, it's doable due to jQuery's noconflict mode. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 --><script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script><script type="text/javascript">var jQuery_1_1_3 = $.noConflict(true);</script><!-- load jQuery 1.3.2 --><script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script><script type="text/javascript">var jQuery_1_3_2 = $.noConflict(true);</script>

Then, instead of $('#selector').function();, you'd do jQuery_1_3_2('#selector').function(); or jQuery_1_1_3('#selector').function();.


After looking at this and trying it out I found it actually didn't allow more than one instance of jquery to run at a time. After searching around I found that this did just the trick and was a whole lot less code.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>    <script>var $j = jQuery.noConflict(true);</script>    <script>      $(document).ready(function(){       console.log($().jquery); // This prints v1.4.2       console.log($j().jquery); // This prints v1.9.1      });   </script>

So then adding the "j" after the "$" was all I needed to do.

$j(function () {        $j('.button-pro').on('click', function () {            var el = $('#cnt' + this.id.replace('btn', ''));            $j('#contentnew > div').not(el).animate({                height: "toggle",                opacity: "toggle"            }, 100).hide();            el.toggle();        });    });


Taken from http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:

  • Original page loads his "jquery.versionX.js" -- $ and jQuery belong to versionX.
  • You call your "jquery.versionY.js" -- now $ and jQuery belong to versionY, plus _$ and _jQuery belong to versionX.
  • my_jQuery = jQuery.noConflict(true); -- now $ and jQuery belong to versionX, _$ and _jQuery are probably null, and my_jQuery is versionY.