jQueryでクリック時に処理を発動させる方法

ここでは、jQueryを用いてクリックイベント発生時に処理を発動させる方法について見ていきましょう。

on()メソッドを用いる方法

書き方

HTML要素.on(“click”, 処理内容);

使用例

HTML

<input type="button" value="クリック1" id="clickBtn1">

<p id="display"></p>

jQuery

$(function() {
  $("#clickBtn1").on("click", function() {
    $("#display").text("「" + $(this).val()+ "」ボタンがクリックされました。");
  });
});

結果

click()メソッドを用いる方法

書き方

HTML要素.click(処理内容)

使用例

HTML

<input type="button" value="クリック2" id="clickBtn2">
<p id="display"></p>

jQuery

$(function() {
  $("#clickBtn2").click(function() {
    $("#display").text("「" + $(this).val()+ "」ボタンがクリックされました。");
  });
});

結果

まとめ

このように、jQueryでは、on(“click”, 処理)とclick(処理)を用いることでクリックしたときに処理を発動させることができます。