Blogブログ

同一サイトでバージョンの違うjQueryを複数呼び出した場合に回避する方法

2014/03/07

同一サイトで複数のバージョンが違うjQueryを呼び出したい場合があります。

そうするとjQuery同士が衝突してしまいバグの原因になります。

こんな場合に使える簡単な回避方法をメモしておきます。

まず下記のようなソースがあったとします。

<!--jQuery1呼び出し-->
<script type='text/javascript' src='./js/jquery_jcarousel/jquery-1.4.3.pack.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery('#abc').jcarousel();
});
</script>

そこに後日jQueryを追加して新しく何かしらの動作を追加したいとします。

<!--jQuery1呼び出し-->
<script type='text/javascript' src='./js/jquery_jcarousel/jquery-1.4.3.pack.js'></script>
<!--jQuery2呼び出し-->
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>

<!--jQuery2を使いたい-->
<script type='text/javascript'>
$(document).ready(function(){
    $('#hoge').jcarousel();
});
</script>

<!--jQuery1を使いたい-->
<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery('#abc').jcarousel();
});
</script>

こうするとこれ以降、後半に呼ばれたjQueryが有効になってしまい、jquery-1.4.3.pack.jsで動いていたプログラムは動かなくなってしまう場合があります。
これを回避するには

<!--jQuery1呼び出し-->
<script type='text/javascript' src='./js/jquery_jcarousel/jquery-1.4.3.pack.js'></script>
<!--jQuery2呼び出し-->
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>

<!--jQuery2を使いたい-->
<script type='text/javascript'>
var $171= jQuery.noConflict(true);
$171(document).ready(function(){
    $171('#hoge').jcarousel();
});
</script>

<!--jQuery1を使いたい-->
<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery('#abc').jcarousel();
});
</script>

これで回避できます。
ポイントは
var $171= jQuery.noConflict(true);
を追加して
$ から $171に変更することで
jQuery2の方は全体に効果が及ぼさなくなり、$171と指定した場合にしか効かなくなります。

この場合全体に効果がきいているのはjQuery1のjquery-1.4.3.pack.jsの方になります。

参考になれば。

他社より断然お得で使いやすい
”アクトのWEB制作”
ACTホームページ相談窓口 / 
システム開発相談窓口