iPentec.com / Doc /

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" />
  <style>
    .divFrame {
      border: solid 1px #0094ff;
      background-color: #e1e1e1;
      height:2rem;
      width:32rem;
    }
  </style>
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.divFrame").on("click", function () {
        var idstr = $(this).attr("id");
        alert("Div枠がクリックされました:" + idstr);
      })
    })
  </script>
</head>
<body>
  <div id="div1" class="divFrame">Div枠</div>
  <br/>
  <div id="div2" class="divFrame">Div枠</div>
  <br />
  <div id="div3" class="divFrame">Div枠</div>
  <br />
</body>
</html>

解説

イベントハンドラの付与はDOMツリーが構築後の必要があるため、コードはreadyイベントとして実装します。今回の例では"divFrame"のクラス名をセレクタとして利用し要素を選択しています。選択したオブジェクトに対し、onメソッドでイベントハンドラを割り当てます。 onメソッドの第一引数に"click"を与え、クリックイベントのハンドラを割り当てています。イベントハンドラではalertダイアログを表示し、クリックされた旨のメッセージを表示します。
どの枠がクリックされたかは $(this).attr("id") によりクリックされた枠の id 属性の値を取得できます。