同一个HTML页面中引入多版本JQuery导致的冲突问题(已解决)

【问题产生原因】

项目中引入了JQuery插件,版本JQ1.9,添加新的功能时需要引入JQ2.1,引入后原有低版本的所有功能无法运行。

【解决方式】
利用jQuery.noConflict()函数

【具体解决过程】

1.为了不改动原有的JQuery2.1文件,新建一个JS,命名为MyJQuery.2.1.1.js
2.向MyJQuery.2.1.1.js文件中添加代码

(function () {
    
    
 var $JQ2 = jQuery.noConflict(true);
})();

在这里插入图片描述

3.将jquery-2.1.1.min.js文件复制进来
在这里插入图片描述
4.引入页面
因原有页面中的功能都是基于JQ1.9,所以先引入JQ2.1,后引入JQ1.9

<scripttype="text/javascript"  src="assets/js/MyJQuery.2.1.1.js"></script>

<script type="text/javascript" src="assets/js/jquery.1.9.0.js"></script>

5.添加全局变量$JQ2

<script src="assets/js/MyJQuery.2.1.1.js" type="text/javascript"></script>

<script type="text/javascript">
    var $JQ2 = jQuery.noConflict(true);
</script>

<script type="text/javascript" src="assets/js/jquery.1.9.0.js"></script>

6.调用$JQ2

function uploadExcle() {
    
    
        console.log($.fn.jquery);
        console.log($JQ2.fn.jquery);
        $JQ2('#myModalUpload').modal('show');
    }

 $('#delete-btn').click(function () {
    
    
        $JQ2('#myModalUpload').modal('hide');
    });

猜你喜欢

转载自blog.csdn.net/weixin_42547014/article/details/109444757