【jQuery】クリックイベントと効かない時の対処方法

今回はjQueryでクリック操作を検知して、イベント処理を実行する方法について解説していきます。click()とon()の違いやクリックイベントが効かない時の対処方法についても紹介していきます。

1. click()メソッド
2. on()メソッド
3. クリックイベントが効かない場合
4. おわりに

click()メソッド

クリックイベントと言えばこれです。言い換えると、「通常のクリックイベントだけを実行するならこれで良い」と言ってもいいかもしれません。次の例はボタン1が押された時のイベント処理です。

また、補足ですが、例えばALTキーを押しながらクリックした場合なんてことも上の例の様に処理することが出来ます。試しにALTキーを押したままボタンをクリックしてみて下さい。

on()メソッド

続いてon()を使った場合です。click()がクリックだけを処理するのに対して、on()の場合は複数のイベントを処理することが出来ます。まずはクリックイベントだけを処理している例です。

次に複数のイベントの処理方法についても具体例を見ていきましょう。

click	クリックイベント
mouseenter	マウスポインタが要素に入ってきた時
mouseleave	マウスポインタが要素から外れた時

この様に複数のイベントを一度に登録することが出来るのがon()の特徴の1つ目と言えます。

クリックイベントが効かない場合

通常は前記した2つの書式で良いのですが、ページ読み込み後に生成された要素の場合、各種イベントは思い通りに発動してくれません。その場合次の様に書式を変えれば解決します。

まず最初のセレクタにはdocumentを指定します。次にon()の第二引数にイベント処理したい要素のセレクタを指定します。こうすることで動的に生成した要素に対してもイベントを処理することが出来るようになります。これがon()の特徴の2つ目になります。

$(function() {
  $('.button1').on('click', function (e) {
    $('body').append('<button class="button2">ボタン2</button>');
  });
  $(document).on('click', '.button2', function (e) {
    $('.result').text('ボタン2が押されました');
  });
});