【问题产生原因】
项目中引入了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');
});