search

jquery / learn.jquery.com

jQuery Learning Center web site content
https://learn.jquery.com
Other
924 stars 484 forks source link

Need to resolve conflict to Multiple jQuery's from single page #814

Open dmuralimohan opened 1 year ago

dmuralimohan commented 1 year ago

I have initialized window.jQuery = jQuery; now, i want to add some prototype functions with different jQueries, like var a = window.jQuery; var b = window.jQuery; a.fn.helloWorld = () => 1; b.fn.helloWorld = () => 2;

console.log(a.fn.helloWorld()); // 2 console.log(a.fn.helloWorld()); // 2

In this case, when i use noConflict from a variable, then b has undefined then, how can i use jquery for this case?

SuhelKhanCA commented 3 months ago

You can assign each instance of jQuery to a distinct variable by loading it more than once, as an alternative to utilizing noConflict. This is an illustration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Separate jQuery Instances</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var a = jQuery.noConflict(true);
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var b = jQuery.noConflict(true);

        a.fn.helloWorld = function() {
            return 1;
        };

        b.fn.helloWorld = function() {
            return 2;
        };

        console.log(a.fn.helloWorld()); // 1
        console.log(b.fn.helloWorld()); // 2
    </script>
</head>
<body>
</body>
</html>