「思った通りにコードが動かない」状況ほどつまずきやすいものはありませんよね。
そこで本記事では、jQuery on()の基本構文からclick()との違いだけでなく、意外と見落としがちなDOM読み込みタイミングやセレクタ指定のポイントなどを丁寧に解説します。
初心者が陥りやすい落とし穴をまるごとフォローしているため、読めば「コードを書いても動かない」という不安が軽減され、学習がスムーズに進みます。
この記事で基礎を固めながら、一歩先のレベルアップへとつなげましょう。
jQueryのon()とは
on() は、イベントを要素に紐付けるためのjQueryメソッドです。
ここでは以下の3つについて解説します。
- jQuery on()の基本構文
- jQuery on()の主なイベント一覧
- jQuery on()の基本的なイベントの書き方
基本をおさえて使えるようになりましょう。
jQuery on()の基本構文
on()の基本構文は、以下の通りです。
| jQuery(要素).on(イベントの種類, [子要素を指定], [データ], 処理内容); |
要素には、イベントを設定したい対象のHTML要素を書きます。
たとえば「button」がidなら「#button」、クラス名なら「.button」と指定します。
イベントの種類には、設定したいイベント名を記述します。
次の子要素の指定やデータは、特に指定したいものがなければ省略可能です。
最後の処理内容には、実際にイベントが発生したときに実行される処理を定義します。
他のライブラリとの衝突を避けるために、$記号よりもjQueryを使う方が安全です。
$を使いたい場合は、jQuery(function($){ … });のようにスコープを限定しましょう。
明示的にjQueryと書くことで、予期せぬ誤動作を防げます。
jQuery on()の主なイベント一覧
jQuery on()を使用する主なイベントを以下の表にまとめました。
| イベント名 | 説明 | |
| マウス関連 | click | クリックされたとき |
| mouseenter | ホバーされたとき | |
| mouseleave | ホバーが外れたとき | |
| フォーム関連 | change | フォーム内に変更があったとき |
| submit | フォームが送信されたとき | |
| ブラウザ関連 | load | ページが読み込まれたあと |
| resize | ブラウザサイズが変更されたとき |
これらのイベントを適切に活用することで、ユーザーの操作に応じた動的なWebページを効率的に構築できます。
jQuery on()のイベントの書き方
jQueryでイベントを書くときの構文は、次のように書きます。
| jQuery(“セレクタ”).on(“イベント名”, function() {処理を書く}) |
たとえば、ボタンをクリックしたときにテキストを変更する例を見てみましょう。
コーディングの流れは、まずHTMLで動きをつけるテキストとボタンにidを指定してからjQueryを記述します。
HTMLのid名は自由ですが、jQueryで使いやすくするために分かりやすい名前をつけましょう。
コピー<p id="message">まだクリックされていません。</p>
<button id="js-btn">クリック！</button>
次にjQueryでクリックした瞬間に動作するようにイベントを設定します。
コピーjQuery("#js-btn").on("click", function() {
jQuery("#message")
.text("ボタンがクリックされました！")
});
上記のjQueryのコードでは、最初にjQuery(“#js-btn”)で、HTMLにある「js-btn」というidのボタンを指定しましょう。
次に、ボタンがクリックされた瞬間にイベントが発動するよう、.on(“click”, function(){ … })でクリックイベントの処理内容を定義します。
クリック時の処理として、jQuery(“#message”).text(“ボタンがクリックされました！”)とすることで、idが「message」の要素のテキスト内容を変更します。
jQuery on()の複数イベントの書き方
複数のイベントを指定する場合は、イベント名をキーとして、実行する動作を値のセットで書きます。
ここでは、複数イベントの基本の書き方とWebサイトでよく見かける「ホバーすると色やデザインが変わり、ホバーがはずれると元に戻る」という動きを例に解説します。
複数イベントの基本の書き方
複数のイベントを設定するときは、以下のような形で書きます。
コピー<div class="container">
<h1>jQueryの複数イベント例</h1>
<p id="message">ボタンをクリックしてみてください。</p>
<button id="js-btn">クリック！</button>
</div>
コピーjQuery("対象の要素").on({
"イベント名１": function(){ イベントの処理１ },
"イベント名２": function(){ イベントの処理２ }
});
対象の要素には、イベントを設定したいHTMLの要素を記述しましょう。
HTMLでidを指定し、jQueryで書くときにはidの先頭に「#」をつけます。
たとえばHTMLで以下のように指定すると、jQueryでは「#js-btn」を対象の要素に記述します。
コピー<button id="js-btn">クリック！</button>
次に、イベント名と処理を、{}の中にセットで書きます。
イベントごとに関数を記述して、1つの要素にまとめて設定でき、要素自身を操作するときはjQuery(this)を使うと便利です。
複数イベント例の解説
コピー<div class="container"> <h1>jQueryの複数イベント例</h1> <p id="message">ボタンをクリックしてみてください。</p> <button id="js-btn">クリック！</button> </div>
コピー#js-btn {
background: linear-gradient(90deg, #6d9aff, #89c5ff);
border: none;
color: #fff;
padding: 10px 30px;
font-size: 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
/* ホバー時 */
#js-btn.hovered {
background: #ffafc8;
transform: scale(1.05);
color: #fff;
}
コピーjQuery("#js-btn").on({
"mouseenter": function() {
jQuery(this).addClass("hovered"); // ホバーしたら色変更
},
"mouseleave": function() {
jQuery(this).removeClass("hovered"); // ホバーが外れたら元に戻す
}
});
複数の動きをするjQuery全体のコードは上記の通りです。
まず、一行目に#js-btnというidを持つ要素（ボタン）を指定しましょう。
次にホバーしたら色が変化するイベントの処理を記述します。
ホバーしたときに発動する”mouseenter”を指定し、jQuery(this)（イベントが起きた要素自身）に対して、CSSの「hovered」というクラスを追加します。
最後にホバーが外れたときに元に戻るように、”mouseleave”を指定。
ここでは、追加したクラス「hovered」を削除して、元のスタイルに戻しています。
・複数イベントの設定は、.on({ イベント名:処理 })のように書く
・各イベントは「イベント名」と「処理（関数）」をセットで書く
・イベントが発生した要素自身は、jQuery(this)と書く
jQueryのon()とclick()の違い
on()とclick()は、どちらも「クリックされたときの処理を実行する」という点では同じですが、
実際には以下のような違いがあります。
| on(‘click’, …) | click() | |
| 基本的な動作 | 多用な設定に対応可 | 内部クリック機能 |
| 動的要素への対応 | 後付け対応可 | 後付け対応不可 |
| 拡張性 | 複数イベントや .off() など幅広い操作が可能 | クリック専用のシンプルな機能 |
| 選択の目安 | 動的要素や拡張を見込むとき | 既存要素だけのとき |
click() は内部でon(‘click’) を呼び出すシンプルな機能ですが、後から増える要素には対応しません。
on(‘click’, …) は動的な要素にも反応し、複数イベントや解除機能など拡張性の高い特徴があります。
最初から存在している要素のみに対応させるなら click() 、あとからボタンやリンクが増える可能性があるならon() を使用しましょう。
jQuery on()が効かない主な4つの原因と対処法
書いたはずのイベントが動作しない原因には、初心者が陥りがちなミスがいくつか存在します。
ここではよくある以下の4つのミスについての原因と解決法を紹介します。
- セレクタ指定ミス
- DOMの読み込みタイミング
- jQueryライブラリが読み込まれていない
- 動的に追加された要素にはイベントが効かない
一つひとつの原因と解決法を知っておくと、行き詰まる可能性を大きく減らせます。
ぜひ参考にしてみてください。
セレクタ指定の間違い
正しく動作しないときは、最初にセレクタの指定が間違えていないか確認しましょう。
たとえば、HTMLのボタンにclass=”sample-target”を付け、それにクリックイベントを仕込む場合を見てください。
コピーjQuery("sample-target").on("click", function() {
console.log("クリックされました");
});
上記のコードでは、クラス名を指定するセレクタに必要な「.（ドット）」が抜けているため動作しません。
jQueryのセレクタでは、クラス名の場合は先頭に「.」、ID名の場合は先頭に「#」を付けるルールがあります。
例では”sample-target”と書いてしまっているため、jQueryは<sample-target>というタグ名の要素を探しますが、そのような要素は存在しないため紐づけができません。
これが動作しない根本的な原因です。
セレクタ指定を間違えているときは、正しいセレクタに修正することで問題を解決できます。
セレクタ指定のミスは、間違えていてもエラーが出ないため、ブラウザの開発者ツールのコンソールで確認しましょう。
セレクタが正しいか自信がないときは、コンソールから$(“<セレクタ>”)で要素数を確認したり、該当要素をハイライト表示させてみるのも効果的な方法です。
DOMの読み込みタイミング
対象の要素がまだページ上に存在しない状態で、on()でイベントを設定しようとする場合も動作しない原因になります。
HTMLが読み込まれてブラウザ上のDOMに変換されていないタイミングでは、イベントを正しく紐づけることができません。
典型的なミスは、スクリプトの記述順によるものです。
HTMLは上から順に読み込まれるため、たとえばボタン要素より先にスクリプトを配置してしまうと、イベントが設定されません。
解決方法としては、<body>タグの閉じタグ直前（</body>の直前）にスクリプトを配置することです。
これにより、ページのHTMLを一通り読み込んでからスクリプトが実行されるため、対象要素が既に存在している状態が保証されます。
jQueryライブラリが読み込まれていない
セレクタが合っていて、コードを実行するタイミングも問題ない場合は、jQuery自体が正しく読み込まれていない可能性があります。
jQueryは外部ライブラリのため、HTMLに<script>タグでjQuery本体を読み込まないと、$やon()といったjQuery特有の関数やメソッドは使えません。
jQueryの読み込みを忘れないために、以下の3つを確認するのがおすすめです。
- スクリプトの読み込み順序の確認
- パスやCDNのミスの確認
- エラー表示チェック
また、WordPressでライブラリやフレームワークと組み合わせて使っていると、$という記号がjQuery以外の別の機能と競合して動作しない場合もあります。
環境によっては$が使えないため、jQueryを代用して回避しましょう。
動的に追加された要素にはイベントが効かない
あとから追加された要素にはイベントの設定が届かず、意図した動作になりません。
たとえば、最初にボタンが一つある状態でイベントを設定します。
この状態で新しく追加した2つ目のボタンをクリックしても反応しません。
「ボタン1には紐づいているけど、後から追加したボタン2には紐づいていない」という状況になります。
このような場合は、以下のようにコードを書くと解決できます。
コピーjQuery("div").on("click", "button", function() {
console.log("ボタンがクリックされました");
});
上記のように記述すると、<div>内部にある<button>要素すべてにクリックイベントが適用されます。
最初のボタンも後から追加したボタンも、どちらも同じように処理できます。
動的に追加される可能性がある要素に対しては、直接その要素自身にイベントを設定するのではなく、親となる要素を通じてイベントを設定するといいでしょう。
まとめ：jQuery on()の書き方を覚えよう
複数のイベントをまとめて管理できるjQuery on()メソッドを使いこなすことで、コードの可読性と保守性が向上します。
意図した通りにイベントが動作しないときは、セレクタやイベントの割り当てタイミングをもう一度確認しましょう。
基本を押さえれば、初心者でも自信を持ってjQueryを使いこなせるようになります。
現場で役立つスキルをさらに磨きたい方は、実践的な課題が豊富にそろうデイトラWeb制作コースをぜひチェックしてみてください。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！