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

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

click()メソッド

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

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

on()メソッド

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

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

この様に複数のイベントを一度に登録することが出来るのが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が押されました');
  });
});

おわりに

3つの方法についてその具体例を見てきました。私の場合は3つの方法を使い分ける様にしているのですが、あれこれ考えずに確実な方法で統一したいという場合は、3つ目に紹介したdocumentに対してon()メソッドで処理する方法を選択するのが賢明かもしれません。