How do I solve this jQuery plugins conflict?

问题

I am using two different jQuery plugins; one for news logo ticker and another for horizontal text slider.

but only one of them is working at a time when when used in single page may be because of jQuery conflict.. If I comment first plugin second plugin works fine and vice verse.

Here is the code:

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.newsticker.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(
            function()
            {
                jQuery("#news").newsTicker();
                jQuery("#development").newsTicker();                
            }
        );
    </script>
    <link href="css/style.css" rel="stylesheet" type="text/css">            
    <link rel="stylesheet" type="text/css" href="plugins/image_slider/css/sliderman.css" /> 


    <link type="text/css" href="css/humanity/jquery-ui-1.8.13.custom.css" rel="stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript">
        jQuery(function(){
            jQuery("#accordion").accordion({ header: "h3" });
        });
    </script>
    <link rel="stylesheet" href="css/news.css" type="text/css" media="screen">
    <script src="js/jcarousellite_1.0.1c4.js" type="text/javascript">  
</script>

Thanks!

回答1:

Try arranging your script references:

1) jquery

2) jquery-ui

3) newsticker

and add it to the top of the page before calling any jquery related methods.

Not 100% sure if this will work, but give it a try.

Don't know which version of newsticker you are using, but have a look at this link.

回答2:

1. It isn't always enough to just add jQuery.noConflict();. You may also need to replace all occurrences $ with jQuery. The difficulty is, variables are often defined as $a_variable_name, replacing the $ in variables will result in errors.

   See if you can find a version of tipsy with the noConflict edits already made. Note also, it is often necessary to add noConflict and replace $ with jQuery to other jQuery scripts especially if that script is dependant on another.

   This does solve conflicts as I have been doing this for some time. Note also, if you use jQuery throughout, these edits are not normally required.

2. The sequence you load script files is also important, try rearranging them.

3. Only execute scripts when they are required. In other words, if a particular piece of code is causing conflict, load it from the page where it is required and not in the header, using script tags.

回答3:

You may need to declare variable . Because $ is using on other js frameworks like prototype. so just simply put under following script at the top of ur script.

var jQuery = jQuery.noConflict(); 

回答4:

I faced the same problem when using a lot of plugins for my web page. The easiest solution is to have a concatenated file of all the .js files and have a single include at the head. Also you can minify ( minify tools available online ) the concatenated file and just include the min version. This should solve the problem.

One more way is to make sure the plugin is available before you call the function in the plugin. Try to use getScript of jquery to ensure both plugins are loaded and make the function calls of plugin inside success handler of getScript

来源：https://stackoverflow.com/questions/6531227/how-do-i-solve-this-jquery-plugins-conflict