WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

CSS3によって、さまざまな効果をつけることが出来るようになってきましたが「クリックしたら○○する」など、まだまだJavaScriptやjQueryに頼らないといけない部分があります。
そのjQueryもたびたびバージョンアップが行われ、読み込みや処理の高速化が図られてきました。しかし、その弊害として、これまでと同じようにクリックイベントの処理を書いたのに上手く動いてくれない、、、といった場合も出てきます。そんな時は次の部分を確認してみてください。

jQuery本体のバージョンの問題

jQueryの最新版は3.x系となっています。古い1.x系も使用することは問題ないですが、こちらは古いブラウザまでも対応するためスクリプト量が多いので、読み込み時間がかかるというデメリットがあります。
それに対し3.x系はモダンブラウザのみの対応となっているので、読み込みが軽いというメリットがあります。

ですが、これまで1.x系を使ってきて、3.x系を読み込むようにしたら急に動かなくなるということがあります。

3.x系では.clickが使えない

これまで何かをクリックした時に処理を行いたい時は

1.x系

$('#btn').click(function() {
    処理内容
});

こちらのイベント記述で呼び出すことができていましたが、3.x系からは

3.x系

$('#btn').on('click', function() {
    処理内容
});

というように、.onの形式で書かないと動かないということになりました。

他にも.○○○の形式で使えなくなったもの

.○○○の形式で使えなくなったものにはほかにもあります。

.load

1.x系

$('window').load(function() {
    処理内容
});

3.x系

$('window').on('load', function() {
    処理内容
});

ページが読み込まれたタイミングで実行するときに使っていた$(window).loadですが、3.x系からは.clickと同じく.onの記述で書くこととなりました。

ページのローディングアニメーションを使用する時などに使われるものです。

まとめ

jQueryのバージョンが上がり、読み込みが速くなり便利になった一方、これまで覚えてきた内容が使えなくなるということもあります。
メリット・デメリットと相談しながら使い分けていくことが必要になりそうです。

このシリーズでは、これからもjQueryの「困った」を解決していきます。
次回は「○秒後にaddClass/removeClassしたい」というタイトルでお伝えする予定です。

第2弾の記事はこちら
jQueryでの「困った」を解決！（2）時間差でclassを付け外ししたい！