Deferred javascript noConflict different version jquery

Question

In my one function I need use twice jquery version. One for all function and another jquery for one function..

I can not control conflict in deffering.

<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/jquery-11.0.min.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/unitegallery.min.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/ug-theme-carousel.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/jquery-3.3.1.min.js'></script>

window.addEventListener('DOMContentLoaded', function () {
        (function ($) {
            jQuery(document).ready(function ($) {

            // Need 2 different jquery version
            LoadVideos();
            });
        })(jQuery);
    });


       // Need only 1 jquery version
       window.addEventListener('DOMContentLoaded', function () {
        (function ($) {
            jQuery(document).ready(function ($) {
                LoadAnaOwl();
                LoadYayinAkisi();
                $('body').on('click', '.mansetPaginition li a', function () {
                    $('.mansetPaginition li a').removeClass('active');
                    $(this).addClass('active');
                });
                $(document).on('mouseenter mouseleave', '.mansetPaginition li a', function () {
                    $('.mansetPaginition li a').removeClass('active');
                    $(this).addClass('active');
                    window.location.hash = this.hash;
                });
            });
        })(jQuery);
    });
</script>

Answer 1

Use jQuery.noConflict.

jQuery.noConflict(bool) will return the jQuery function and restores the $ global variable to its old reference. bool indicates whether or not to remove all global jQuery variables, including jQuery. Calling jQuery.noConflict(true) if there are two versions of jQuery loaded will restore the globally scoped jQuery variables to those of the first version.

window.addEventListener('DOMContentLoaded', function () {
        (function ($) {
            jQuery(document).ready(function ($) {
            window.jq331 = jQuery.noConflict(true);
            // Need 2 different jquery version
            LoadVideos();
            });
        })(jQuery);
});

<script src="https://code.jquery.com/jquery-1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var jq331 = jQuery.noConflict(true);
//jQuery and $ is version 1.1.0
//jq331 is version 3.3.1
console.log('jQuery version:',jQuery.fn.jquery);
console.log('$ version:', $.fn.jquery);
console.log('jq331 version:',jq331.fn.jquery);
</script>