Home > Articles > Jquery Articles > jQuery noConflict Using multiple jQuery versions on the same page.

jQuery noConflict Using multiple jQuery versions on the same page.

by John Prathip   on Sep 07, 2015   Category: Jquery  | Level: Intermediate  |  Views: 837    |  Points: 100   
Like this article? Bookmark and Share:
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. 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">
        $("#Buttona").live("click"function () {
            alert("Buttona clicked.")
        });
        $j(function () {
            $j("#Buttonb").click(function () {
                alert("Buttonb clicked.")
            });
        });
    </script>
    <input type="button" id="Buttona" value="Buttona" />
    <input type="button" id="Buttonb" value="Buttonb" />
</body>
</html>



Like this article? Bookmark and Share:

Most viewed Articles

User Comments


No response found, be the first to review this article.

Submit feedback about this article

Please sign in to post feedback

Latest Posts