jQuery noConflict() Mode

In environments where multiple JavaScript libraries are used, conflicts may arise due to overlapping usage of the $ symbol. jQuery provides the noConflict() method to avoid such conflicts by relinquishing control of the $ symbol and allowing it to be used by other libraries.

Syntax

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
jQuery.noConflict();
jQuery.noConflict();
jQuery.noConflict();

After calling noConflict(), jQuery no longer uses the $ alias. Instead, you must use the jQuery keyword to access jQuery methods.

Example: Using noConflict()

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>jQuery noConflict() Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// Simulate another library that uses $
var $ = function() {
console.log("Another library's $ function.");
};
</script>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
// Release the $ symbol for another library
jQuery.noConflict();
// Now you must use jQuery instead of $
jQuery(document).ready(function() {
jQuery("#myButton").click(function() {
alert("Button clicked using jQuery!");
});
});
// Test the $ symbol (belongs to the other library)
$(function() {
console.log("This is another library's $.");
});
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>jQuery noConflict() Example</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> // Simulate another library that uses $ var $ = function() { console.log("Another library's $ function."); }; </script> </head> <body> <button id="myButton">Click Me</button> <script> // Release the $ symbol for another library jQuery.noConflict(); // Now you must use jQuery instead of $ jQuery(document).ready(function() { jQuery("#myButton").click(function() { alert("Button clicked using jQuery!"); }); }); // Test the $ symbol (belongs to the other library) $(function() { console.log("This is another library's $."); }); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
    <title>jQuery noConflict() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        // Simulate another library that uses $
        var $ = function() {
            console.log("Another library's $ function.");
        };
    </script>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        // Release the $ symbol for another library
        jQuery.noConflict();

        // Now you must use jQuery instead of $
        jQuery(document).ready(function() {
            jQuery("#myButton").click(function() {
                alert("Button clicked using jQuery!");
            });
        });

        // Test the $ symbol (belongs to the other library)
        $(function() {
            console.log("This is another library's $.");
        });
    </script>
</body>
</html>

Try It Now

Example: Using Both jQuery and Another Library

Here’s how you can use noConflict() while still using jQuery and another library simultaneously.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>Using jQuery with noConflict()</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// Simulate another library that uses $
var $ = function() {
console.log("This is another library's $.");
};
</script>
</head>
<body>
<button id="btn1">Click with jQuery</button>
<button id="btn2">Click with Other Library</button>
<script>
// Save jQuery in a separate variable
var jq = jQuery.noConflict();
// Use jQuery with the jq alias
jq(document).ready(function() {
jq("#btn1").click(function() {
alert("Handled by jQuery!");
});
});
// Use the $ symbol for the other library
$(function() {
$("#btn2").click(function() {
alert("Handled by another library!");
});
});
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Using jQuery with noConflict()</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> // Simulate another library that uses $ var $ = function() { console.log("This is another library's $."); }; </script> </head> <body> <button id="btn1">Click with jQuery</button> <button id="btn2">Click with Other Library</button> <script> // Save jQuery in a separate variable var jq = jQuery.noConflict(); // Use jQuery with the jq alias jq(document).ready(function() { jq("#btn1").click(function() { alert("Handled by jQuery!"); }); }); // Use the $ symbol for the other library $(function() { $("#btn2").click(function() { alert("Handled by another library!"); }); }); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery with noConflict()</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        // Simulate another library that uses $
        var $ = function() {
            console.log("This is another library's $.");
        };
    </script>
</head>
<body>
    <button id="btn1">Click with jQuery</button>
    <button id="btn2">Click with Other Library</button>

    <script>
        // Save jQuery in a separate variable
        var jq = jQuery.noConflict();

        // Use jQuery with the jq alias
        jq(document).ready(function() {
            jq("#btn1").click(function() {
                alert("Handled by jQuery!");
            });
        });

        // Use the $ symbol for the other library
        $(function() {
            $("#btn2").click(function() {
                alert("Handled by another library!");
            });
        });
    </script>
</body>
</html>

Try It Now

Scenarios to Use noConflict()

  1. When using multiple JavaScript libraries:
    If a library (e.g., Prototype.js, MooTools) also uses $, you should call jQuery.noConflict() to avoid conflicts.
  2. Team or project requirements:
    Some projects may require jQuery to be explicitly referenced for clarity.

jQuery in noConflict() Mode

After calling noConflict(), you can still use jQuery in several ways:

  1. Use the jQuery keyword instead of $:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    jQuery("p").text("Hello, World!");
    jQuery("p").text("Hello, World!");
    jQuery("p").text("Hello, World!");

    Try It Now

     

  2. Assign jQuery to a custom alias:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    var jq = jQuery.noConflict();
    jq("p").text("Hello, World!");
    var jq = jQuery.noConflict(); jq("p").text("Hello, World!");
    var jq = jQuery.noConflict();
jq("p").text("Hello, World!");

    Try It Now

Summary

  • The noConflict() method releases the $ alias, preventing conflicts with other libraries.
  • Use the full jQuery name or assign it to another variable (e.g., jq) to continue using jQuery.
  • noConflict() is especially useful in projects with multiple libraries relying on the $ symbol.

By understanding and using noConflict(), you can safely integrate jQuery into complex, multi-library projects without breaking functionality!