Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Putting jQuery into No-Conflict Mode using New Shortcut</title> <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> // Defining the new alias for jQuery var $j = jQuery.noConflict(); $j(document).ready(function(){ // Display an alert message when the element with ID foo is clicked $j("#foo").click(function(){ alert("jQuery is working well with prototype."); }); }); // Some prototype framework code document.observe("dom:loaded", function(){ // Display an alert message when the element with ID bar is clicked $(bar).observe('click', function(event){ alert("Prototype is working well with jQuery."); }); }); </script> </head> <body> <p>Click these buttons to check whether the jQuery and Prototype JavaScript libraries are working without any conflict or not.</p> <button type="button" id="foo">Run jQuery Code</button> <button type="button" id="bar">Run Prototype Code</button> </body> </html>
