来自 googleapis 的 jquery.min.js 与 1.6.2 jquery.min.js 冲突

Question

I'm using <script src="js/jquery.min.js"></script> FOR THE SLIDER and many other functionalities. I'm also using <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> FOR THE GALLERY.

Everything seems to work perfectly but when I add 1.6.2 jquery.min.js from googleapis it stops everything, including the sliders and the smooth scrolling. The only thing that is working is the gallery.

Here's my code:

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){     
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });
    </script> 

In the body I have this code:

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

This is the one that's causing conflict, I have tried to put it in the head but it did not make any difference:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Thank you for your assistance!

Answer 1

In general you should avoid using 2 different versions of jQuery on the same page. Most of the time you won't need to - they are largely backwards compatible. Try putting the newer of the 2 versions of jQuery first, then removing the other one. As js/jquery.min.js is the newer version, try removing the google ajax apis one completely.

If you are using something that is broken by a new version of jQuery, check that there hasn't been a new version of that thing released. If there hasn't, try to fix it yourself to work with the new jQuery.

The next option is to check if there is an older version of the thing that requires a new jQuery that might work with the older jQuery version.

If none of those options work, you can try to use 2 versions of jQuery on your page using jQuery.noConflict() , but this is not recommended. After you load the first version and before you load the second, do something like:

j = jQuery.noConflict();

Then use j instead of $ whenever you want to use that version of jQuery, and $ for the second version.

Answer 2

enter code here  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script>
    $j = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="vendor/jquery/jquery.min_multi_select.js"></script>

Works well, then you can use $j.ajax({ })