How to Prevent Jquery Conflicts

If you have a Jquery conflict, one of the Jquery scripts will not load.  In this tutorial, I’m going to briefly show how to edit the code and prevent Jquery conflicts.  First step is to set a variable to call the Jquery instead of the regular $ symbol.

Here’s an example of how you set the variable:
var $custom = jQuery.noConflict();

Then, throughout your jquery code, anywhere you would call the jquery using $, you now instead use $custom.

Here’s an example of some Jquery using $custom instead of $:

var $custom = jQuery.noConflict();

$custom(document).ready(function () {
$custom(“#menu ul li:last-child”).addClass(“last”);
$custom(“#menu li”).hover(function() {
$custom(this).find(“ul”).stop(true,true).slideToggle();
});
});

Once you’ve set up the no conflict code the way I’ve just shown you, you will be able to have more than one jquery effect on a page without any problems.  This is also useful when dealing with other javascript libraries like prototype or mootools.  Since they also use the $ symbol, you can run into conflicts if you don’t use the no conflict code.

Comments

comments

Tags: ,