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

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

概要

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

書式

書式1

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

書式2

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

書式3

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

書式4

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

on メソッドを使う記述がより新しい記述形式です。

プログラム

コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {

      $("#link01").on('click', function () {
        $("#output").html("リンク1がクリックされました。");
      });
      $("#link02").on('click', function () {

        $("#output").html("リンク2がクリックされました。");
      });
      $("#link03").on('click', function () {
        $("#output").html("リンク3がクリックされました。");
      });

    })
  </script>

</head>
<body>
  <a id="link01" href="javascript:void(0);">リンク 1</a><br />
  <a id="link02" href="javascript:void(0);">リンク 2</a><br />
  <a id="link03" href="javascript:void(0);">リンク 3</a><br />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

イベントハンドラの付与はDOMツリーが構築後の必要があるため、コードはreadyイベントとして実装します。今回の例では"link01", "link02", "link03" をセレクタとして利用してオブジェクトを選択しています。選択したオブジェクトに対し、onメソッドでイベントハンドラを割り当てます。onメソッドの第一引数に"click"を与えることで、クリックイベントのハンドラを割り当てています。イベントハンドラでは、"output"のidを持つ要素の内部テキストにクリックされた旨のメッセージを表示します。