「ボタンにイベントを設定したはずなのに発火しない」
「チェックボックスにチェックが入ってもイベントが起きない」
こういう風になぜかイベントが発火しないことはjQueryを使っているとちょくちょく遭遇します。
しかもエラーも出ないし、DOMの読み込み後にイベントを設定してるのに関わらずです。
という訳でイベントが発火しないときの簡単にできる対処法について紹介
イベントが発火しないのはなぜ？
まずなんでイベントが発生しないのか？
ということですが、それは単純にイベントハンドラが登録されていないからです。
そもそもイベントハンドラが登録されてなければイベントは発火しようがありません。
ではどういうときにイベントが未登録になってしまうのか・・・
それは動的にボタンやチェックボックスなどの部品を追加したときです。
これだけだと分かりにくいので少し例を使って説明します。
例えば次のようなHTMLを作成したとしましょう。
|
1 2 3 4 5 6 |
<div id="btns_box"> <button class="clickme_btn">Click Me</button> </div> <br> <button id="add_clickme_btn_btn">Add Button</button> |
そしてこの中で 'add_click_btn_btn' というIDを持つボタンが押されたときに、div要素内に 'clickme_btn' と同じボタンを動的に追加したいとします。
そしてそのために次のようなjQueryコードを書きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ /** 追加されるボタンにイベントを追加 */ $('.clickme_btn').on('click', function(){ alert('Button is clicked'); }); /** ボタンの追加処理 */ $('#add_clickme_btn_btn').on('click', function(){ $('#btns_box').append( '<button class="clickme_btn">Click Me</button>' ); }); }); |
このコードでやりたいことは
- ボタン(add_clickme_btn_btn)が押されたらボタン(clickme_btn)追加
- ボタン(clickme_btn)が押されたらアラート表示
という２つです。
１番目のボタンの追加処理については問題なくできます。
しかし２番目のアラート表示については追加されたボタンでは上手くいきません。
具体的にどういう風に動くかは次のCodePenを参照
See the Pen 【jQuery】イベントが動作しない悪い例 by ぴー助 (@pisuke-code) on CodePen.
「Add Button」をクリックした後に追加されたボタンを押せば何も起こらないことが分かるはずです。
このように動的に追加された要素だとイベントが発火しないことが起こります。
ではなぜイベントが発火しないかというとその原因が次のコード
|
1 2 3 |
$('.clickme_btn').on('click', function(){ alert('Button is clicked'); }); |
これが期待通りに動くのはイベント登録した要素が既にDOM上に存在する場合だけです。
もし動的に追加された要素でもイベント登録したいなら少し工夫する必要があります。
イベントが発火しないときの対処法
では動的に追加したボタンなどでイベントが発火しないときはどうすればいいか・・・
その答えは document に対してイベントを登録することです。
例えば次のような感じで
|
1 2 3 |
$(document).on('イベントタイプ', 'セレクタ', function(){ /* イベント発火時の処理 */ }); |
$(document).on のようにウェブページ全体に対してイベントハンドラを登録します。
そして on の２番目の引数にイベント処理したいボタンなどの要素のセレクタを書けばOK
先ほどのボタン追加の例でいうなら次のように書き直せば期待通りに動作します。
|
1 2 3 |
$(document).on('click', '.clickme_btn', function(){ alert('Button is clicked'); }); |
これでドキュメント全体でクリックイベントが受け取れ、その発生元が '.clickme_btn' だった時にイベントが発生するようになります。
実際にどのように動くかについては次のCodePenを見てください。
See the Pen 【jQuery】イベントが動作しない場合の解決策 by ぴー助 (@pisuke-code) on CodePen.
動的に追加したボタンでもアラートが表示されるようになっています。
ここまでのまとめ
ということでここまでのことを簡単にまとめると次の通り
- イベントが発火しない原因
動的に追加した要素だとイベントハンドラが登録されないから
- イベントが発火しないときの対処法
要素そのものでなくdocument全体でイベントを受け取る
Web開発してると動的に要素を追加する場面って意外と多いんですよね。
そういう時にイベントが起こらない場合は 「documento全体でイベントを受ける」⇒「イベント処理する要素を絞り込み」のようにすれば上手くいきます。
ということでjQueryでイベントが発火しないときの対処法でした。
ではでは･△･)ﾉ ﾊﾞｲﾊﾞｲ
