jQueryを利用して、ボタンがクリックされたタイミングで処理を実行する - jQuery

jQueryを利用して、ボタンがクリックされたタイミングで処理をするコードを紹介します。

概要

jQueryを利用してボタンのクリックイベントを処理するには、セレクタでオブジェクトを取得し、オブジェクトのonメソッドを呼び出し、”click”を第一引数に与えてイベントを設定します。

書式

書式1

$(セレクタ).on('click',イベント実行関数);

書式2

$(セレクタ).on('click',function(){
  ...クリック時に実行する処理
});

clickメソッドを呼び出す書式も利用できます。
on メソッドを使う記述がより新しい記述形式です。

書式3

$(セレクタ).click(イベント実行関数)

書式4

$(セレクタ).click(function(){
  ...クリック時に実行する処理
});

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#button01").on('click', function () {
        alert("ボタン1がクリックされました。");
      });
      $("#button02").on('click', function () {
        alert("ボタン2がクリックされました。");
      });
      $("#button03").on('click', function () {
        alert("ボタン3がクリックされました。");
      });

    })
  </script>
</head>
<body>
  <input id="button01" type="button" value="ボタン1"/>
  <input id="button02" type="button" value="ボタン2" />
  <input id="button03" type="button" value="ボタン3" />
</body>
</html>

解説

イベントハンドラの付与はDOMツリーが構築後の必要があるため、コードはreadyイベントとして実装します。今回の例では"button1","button2","button3" をセレクタとして利用し要素を選択しています。選択したオブジェクトに対し、onメソッドでイベントハンドラを割り当てます。onメソッドの第一引数に"click"を与えることで、クリックイベントのハンドラを割り当てています。イベントハンドラではalertダイアログを表示し、クリックされた旨のメッセージを表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[ボタン1]ボタンをクリックします。下図のアラートダイアログが表示されます。

[ボタン2をクリックした場合は、下図のアラートダイアログが表示されます。「ボタン2がクリックされました。」のメッセージが表示されます。

[ボタン3]をクリックした場合も同様に、ボタン3がクリックされた旨のメッセージが表示されます。

click()メソッドを利用する実装

先の例では、onメソッドを利用して実装しましたが、click()メソッドを利用する実装もあります。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#button01").click(function () {
        alert("ボタン1がクリックされました。");
      });
      $("#button02").click(function () {
        alert("ボタン2がクリックされました。");
      });
      $("#button03").click(function () {
        alert("ボタン3がクリックされました。");
      });

    })
  </script>

</head>
<body>
  <input id="button01" type="button" value="ボタン1"/>
  <input id="button02" type="button" value="ボタン2" />
  <input id="button03" type="button" value="ボタン3" />
</body>
</html>

解説

先のコードでは、onメソッドを利用し、第一引数に"click"を与え、第二引数にイベントハンドラの関数を与えることでクリックイベントを実装しました。今回の例では、clickメソッドを利用し、第一引数にイベントハンドラの関数を与えることでクリックイベントを実現できます。

実行結果

上記のHTMLの実行結果は先の "$("#button01").on('click', function () {" で記述したコードと全く同じになります。

クラス名を指定したクリックイベントの実装

クラス名で指定した要素に対するクリックイベントを実装するコードを紹介します。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".button_std").on('click', function () {
        alert(this.value + "がクリックされました。");
      });
    })
  </script>

</head>
<body>
  <input class="button_std" type="button" value="ボタン1"/>
  <input class="button_std" type="button" value="ボタン2" />
  <input class="button_std" type="button" value="ボタン3" />
</body>
</html>

補足

また、Inputタグのbutton_std クラスのみを選択する場合は下記のコードとなります。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("input.button_std").on('click', function () {
        alert(this.value + "がクリックされました。");
      });
    })
  </script>

</head>
<body>
  <input class="button_std" type="button" value="ボタン1"/>
  <input class="button_std" type="button" value="ボタン2" />
  <input class="button_std" type="button" value="ボタン3" />
</body>
</html>

解説

jQueryセレクタの先頭に"#"を記述することで、指定したIDを持つ要素を選択できます。上記のコード例では"button01"のIDを持つ要素を選択できます。クリックイベントでは、alertダイアログを表示し、クリックされた旨のメッセージを表示します。クリックしたボタンのオブジェクトはthisに格納されているため、this.value を取得することでクリックしたボタンのキャプションを参照できます。