[jQuery] jQuery 버전 충돌 해소

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

 

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

 

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

 

<!-- 기존 쓰고있던 내장 jquery --> <script src="/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>

※ 341은 jQuery 의 버전명일뿐 원하는 이름으로 변경해도 무방( jQuery 의 상이한 버전을 표기하기 위해 번호로 네이밍함)

 

 

위에서 $341로 jQuery를 네이밍했기때문에

사용시도 $341로 사용해야한다.

<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);

 

위 방법을 통해 jQuery의 버전충돌을 해소할 수 있다.