jQueryでよく使う、マウスをクリックしたらイベントを発動させるclick()についてです。
動的に追加した要素に対してclick()を効かせるon()や、クリックイベントを無効にする方法などもご紹介します。
目次
click()の使い方
クリックしたらアラートを出す
まずは、クリックしたときにclick()を使ってアラートを出現させてみましょう。
HTML
|
1 |
<button>クリック！</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //クリックしたらアラートを表示 alert('ボタンがクリックされました。'); }); }); |
結果（動作サンプル）
下記テキストをクリックするとアラートが出るかと思います。
これがクリックイベントの一番基本的な動作ですね。
基本構文
$( セレクタ ).click(function() {
〜処理〜
});
セレクタに続けてclickを指定し、引数に関数を入れて処理します。
クリックしたらテキストを表示
これも似たような動作ですが、ボタンをクリックしたら隣の要素にテキストを表示させてみましょう。
HTML
|
1 2 3 4 5 |
<!--クリックイベント用ボタン--> <button>クリック！</button> <!--テキスト表示用--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //クリックしたボタンのとなりの要素にテキストを出力 $(this).next().text('ボタンがクリックされました。'); }); }); |
結果（動作サンプル）
下記テキストをクリックするとテキストが出力されるかと思います。
ボタンの下にテキストが表示されました。
参考：jQueryの$(this)の使い方
参考：jQueryのnext()やprev()などで兄弟要素を取得
複数のクリックイベント
同じ要素が複数あった場合のクリックイベントの拾い方です。
複数要素からクリックした要素のみを取得
同じ要素から特定の要素のみを取得したい場合は、IDを付けたりして差別化をはかる方法もありますが、もっと簡単に特定の要素のみを取得する方法です。
HTML
|
1 2 3 4 |
<p>さくら</p> <p>ひまわり</p> <p>もみじ</p> <p>うめ</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { //p要素をクリックしたら発動 $('p').click(function() { //クリックしたp要素のテキストのみ赤色にする $(this).css('color', 'red'); }); }); |
結果（動作サンプル）
テキストをクリックすると赤色に変わるかと思います。
さくら
ひまわり
もみじ
うめ
クリックしたテキストだけ赤色になりましたね。
$('p')をセレクタに指定すると全ての<p>要素が対象になってしまうので、 $(this)を使うことでクリックしたエレメントのみを取得することが可能です。
動的に追加した要素のクリックイベント
上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなclick()では動作しません。
以下サンプルでご確認ください。
動作しない普通のクリックイベント
上記サンプルでご紹介した普通のclick()の場合です。動的に追加したボタンでclick()を使っても動作しません。
HTML
|
1 |
<button id="btn">クリック！</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { //#btnをクリックしたら発動 $('#btn').click(function() { //クリックしたボタンのとなりにボタンを作成 $(this).after('<br><button class="add">追加</button>'); }); //上で生成したボタンで普通のクリックイベントを発動 $('.add').click(function() { //アラートが出ない alert('追加したボタンもクリックされました！'); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると追加というボタンが出てくるので、それをクリックしてみてください。
何も動作しないはずです。
追加ボタンをクリックしても何も起きないと思いますが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。
以下のようにon()を使えば動的に追加した要素でも動作します。
動作するon()を使ったクリックイベント
今度は動的に追加したボタンでon()を使ったので動作します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { //#btnをクリックしたら発動 $('#btn').click(function() { //クリックしたボタンのとなりにボタンを作成 $(this).after('<br><button class="add">追加</button>'); }); //上で生成したボタンをon()を使って発動 $('document').on('click' ,'.add', function() { //アラートが出る alert('追加したボタンもクリックされました！'); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると追加というボタンが出てくるので、それをクリックしてみてください。
今度はアラートが出るはずです。
出ましたか？
どう違うのか見てみましょう。
両者の違い
//動的に生成したボタンで普通のクリックイベントを発動
$(‘.add’).click(function() {
//動的に生成したボタンをon()を使って発動
$(‘document’).on(‘click’ ,’.add’, function() {
on()を使って発動した方はイベント名のclickとクリックするボタンのclassである.addが、on()の引数に指定されていて、セレクタはドキュメントを指定しています。
on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう
動的に追加したクリックイベントではon()を使いましょう。
クリックイベントを無効にする
<a>要素にjavascriptのリンクを設定したり、submit前に確認ダイアログを出すために要素の効果を無効にしたい場合もあるでしょう。
<a>要素のリンクを無効にする
リンク先に飛ばないようにするには以下のようにします。
HTML
|
1 |
<a href="http://www.flatflag.nir87.com/" target="_blank">リンクはこちら</a> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { //a要素をクリックしたら発動 $('a').click(function() { //アラートを出す alert('リンクは無効になりました！'); //要素の効果を無効化する return false; }); }); |
結果（動作サンプル）
以下のリンクをクリックするとアラートが出るかと思います。
リンクをクリックしてもアラートが出るだけで、リンク先に遷移しません。
説明
処理を中断するには以下のコードを記述します。
|
1 2 |
//要素の効果を無効化する return false; |
return falseは、それ以降の処理を全て中断して終了させます。
処理の最後に記述するようにしましょう。
以下の記事ではsubmitを無効化する解説を載せています。
