Tutorialspoint.dev

jQuery | noConflict() with Examples

The noConflict() is an inbuilt function in jQuery and jQuery generally use “$” sign as a shortcut identifier. There are many javascript libraries like Angular Js, Ember, Knockout and more. Now if other JavaScript frameworks with jQuery start using “$” sign as a shortcut, then there will be a conflict and one of the framework may stop working. Therefore, noConflict method is implemented.

Syntax:

$.noConflict();

Parameters: It does not accept any parameter.
Return Value: It does not return anything.
How conflict arises?
Example:

src="prototype.js"
src="jquery.js"

In above example, there are two JavaScript libraries used in same file and both of them using same “$” sign to select elements. Now the conflict arise and may one of the libraries fails to access the element using “$” sign.
The noConflict() method releases the hold on the “$” shortcut identifier, so that other scripts can use it.
jQuery code which produces conflict:

<html>
  
<head>
                  jquery/3.3.1/jquery.min.js"></script>
    <script>
        jq(document).ready(function() {
            jq("button").click(function() {
                jq("p").text("jQuery is still working!");
            });
        });
    </script>
</head>
  
<body>
    <p style="color:green">This will show how to save
                           reference and use them.</p>
    <button>Click Me.!</button>
</body>
  
</html>

Output:
Before clicking on the button-

After clicking on the button–

Here output is same before and after clicking the button and hence there is existence of conflict.
jQuery code to overcome such conflict using noConflict() function:

<html>
  
<head>
    <script>
        //Here noConflict() refernce is save to a variable
        var jq = $.noConflict();
        jq(document).ready(function() {
            jq("button").click(function() {
                jq("p").text("jQuery is still working!");
            });
        });
    </script>
</head>
  
<body>
    <p style="color:green">This will show how to save 
                           reference and use them.</p>
    <button>Click Me.!</button>
</body>
  
</html>

Output:
Before clicking the button-

After clicking the button-



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter