[jQuery] jQuery 버전 충돌 해소

같은 페이지에 jQuery 각각 다른 버전 사용하기 (jQuery 버전 충돌 해소)

- bootstrap 내장 jQuery 버전과 추가구현할 기능의 jQuery 버전이 달라 충돌이 일어나 error가 발생할 경우 충돌해소 방법

그냥 아래와 같이 적용을 하면 충돌이 생겨 기존 기능에서 에러가 발생한다. (기존 적용된 기능이 안되던가 새로 추가된 기능이 안되던가)

<!-- bootstrap 내장 jquery -->
<script src="/assets/global/plugins/jquery-ui/jquery-ui.min.js"	type="text/javascript"></script>

<!-- 추가할 jquery -->
<script src="/js/jquery-3.4.1.min.js"></script>	

 

새로 적용할 jquery버전에 $.noConflict(true); 문법을 사용한다.

<script src="/js/jquery-3.4.1.min.js"></script>	
<script>
var $j341 = jQuery.noConflict();
</script>

 

새로운 버전의 jquery를 사용하기 위해서는 아래처럼 $j341을 사용해주어야 한다.

<script>
$j341.ajax({...})
$j341("#button").click(function () {... });
</script>

 

각 라이브러리에 쓰인 js파일에 버전별로 j341로 바꿔야지 문제가 없이 실행 될 수있다.

(js파일 맨 밑만 수정하면 된다.) 

;(function ($, window, document, undefined) {
	var pluginName = "lib",
		defaults = {
			onDislike: null,
			onLike: null,
			animationRevertSpeed: 200,
			animationSpeed: 400,
			threshold: 1,
		};
		.
		.
		.
		
})($j341, window, document);
 //(jquery, window, document); > ($j341, window, document);

 

 

참고 : velog.io/@ddusi/jquery-1