Khi viết 1 chức năng nào đó trong liên quan đến javascript bạn sẽ không tránh khỏi việc xung đột code giữa jquery với các thư viện, điều này làm bạn tốn thời gian fix lỗi của bạn trong khi bạn viết hoàn toàn đúng sau đây là các cách để giải quyết việc xung đột đó.

Cách 1 : Sử dụng cách gọi trực tiếp

Với cách này, các bạn vẫn có thể sử dụng dấu $ như mặc định, và cũng không cần phải đặt jQuery trước các thư viện khác, chỉ đơn giản sử dụng như sau :

<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script>

Cách 2 : Đặt jQuery vào chế độ No-Conflict Mode

Khi đặt jQuery vào chế độ no-conflict, bạn sẽ có thể thay thế kí tự $ ở đằng trước bằng các kí tự khác.

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>

Trong đoạn code trên, kí tự $ đã được thay thế bởi $j, do đó sẽ giúp cho chúng ta tránh trùng lắp với các thư viện khác sử dụng kí tự $ ở đằng trước.

Nếu bạn cảm thẩy việc viết như trên hơi khó chịu và thấy nó không thích với mình lắm thì bạn có thể sử dụng cách thứ 2 dưới đây để tránh xung đột xảy ra:

<!-- Another way to put jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src=" jquery.js"></script>
<script>

jQuery.noConflict();

jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
$( "div" ).hide();
});

// The $ variable in the global scope has the prototype.js meaning.
window.onload = function(){
var mainDiv = $( "main" );
}

</script>

Có vẻ như là code nhìn có vẻ hay hơn ví dụ 1

Cách 3 : Chèn khai báo jQuery đứng trước các thư viện khác.

Nếu bạn chèn jQuery trước những thư viện khác, bạn sẽ có thể sử dụng jQuery khi bạn làm việc với thư viện jQuery , nhưng kí tự $ sẽ được dùng cho các thư viện khác.

<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>

Cách 4 : Sử dụng $ như là một tham số

Nếu bạn không thích với cách 1 là thay thế dấu $ ở đằng trước, thì bạn có thể làm theo như cách sau :

<!-- Another way to put jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
$( "div" ).hide();
});
// The $ variable in the global scope has the prototype.js meaning.
window.onload = function(){
var mainDiv = $( "main" );
}
</script>

Bằng cách chèn dấu $ như là một tham số vào hàm jQuery( document ).ready(), bạn sẽ tránh được xung đột giữa jQuery và các thư viện khác.

Cách 5: Kiểm tra lại danh sách các thư viện của bạn

Nguyên nhân cũng có thể xảy ra nếu bạn sử dụng jquery ở các trang CDN, nếu dùng ngôn ngữ bình dân là, các bạn ko load thư viện jquery trên host của các bạn mà load trực tiếp từ các trang cung cấp jquery, hoặc là cùng lúc load cả 2, cho dù nó là cùng phiên bản hay khác phiên bản. Ví dụ:

//Begin
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
//End

Cách tốt nhất là kiểm tra lại đường dẫn chính xác không, chỉ nên dùng 1 trong 2 mà thôi. Còn nếu trong trường hợp plugin A sử dụng phiên bản 1.5.1 thì ok, nhưng plugin B phải dùng phiên bản 1.71. thì sao? Đừng lo, chỉ cần bạn sử dụng đoạn code sau, bạn cứ hiểu như là nếu lần đầu sinh còn gái mà cần con trai nối dõi thì sinh lần tiếp theo vậy. Bây giờ các bạn cứ sửa lại đường dẫn đến 2 file jQuery kia thành đường dẫn website của bạn là được. Nhớ là 2 file này phải tồn tại trên host nhé.