【jQuery】click()はイベント発火に便利！使い方を解説

<button id="js-btn">ボタンクリックでアラートが出る</button>

const btn = $("#js-btn");
btn.click(function () {
  alert('クリックされました！');
});

出力結果

See the Pen click-alert by ZeroPlus (@zeroplus-programming) on CodePen.

上のコードでは、「ボタンをクリックしたらalreatメソッドによってアラートが出る」イベントを設定しました。

このようにクリックイベントは単体では何も起きません。しかし、クリックイベントにメソッドなどさまざまな処理を記述することで、クリックしてイベントを「発火」させることができます。

click()イベントでクラスを追加・削除してスタイルを変更する

click()イベントに次のようなメソッドを適用することで、要素にクラスを追加、削除することができます。

要素にクラスを追加・削除するメソッド

• toggleClass()メソッド
• addClass()メソッド
• removeClass()メソッド

例えば、次のように「ボタンをクリックしたら要素にクラスを追加・削除する」イベントを適用してみます。

ボタンをクリックしたらis-activeクラスを追加・削除する

  <button id="js-btn">ボタンクリック！</button>
  <div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
  transition: .4s;
}

/* is-activeクラスが付与された状態のスタイル */
.box.is-active {
  border-radius: 50%;
}

const btn = $("#js-btn");
const box = $('.box');

btn.click(function () {
  box.toggleClass("is-active");
});

出力結果

See the Pen click-toggleClass by ZeroPlus (@zeroplus-programming) on CodePen.

CSSでis-activeクラスが付与された状態のスタイルを予め用意しておきます。ボタンをクリックすると、is-activeクラスの追加・削除が行われます。これはtoggleClass()メソッドによるものです。

click()イベントで引数を渡す

click()メソッドでは、引数を渡すことができます。

引数とは関数に渡すデータのこと。例えば次のように記述できます。

<button id="js-btn">オブジェクトを渡すボタン</button>

const btn = $("#js-btn");
const obj = {
  num: 1,
  name: "taro",
}

btn.click(obj, function () {　//(引数, function()
  console.log(obj); // 引数は関数内で変数のように扱える
});

変数「obj」というオブジェクトを作成しています。

ボタンをクリックしたらコンソール画面でオブジェクトのデータを確認することができます。なお、オブジェクトに含まれる特定のデータを取り出す場合は次のようになります。

const btn = $("#js-btn");
const obj = {
  num: 1,
  name: "taro",
}

btn.click(obj, function () {
  console.log(obj.name);　// 変数objのnameデータを取り出す
});

出力結果

これでオブジェクトに含まれるデータを取り出すことができました。

click()イベントとon('click')の違い

on()メソッドとはjQueryのメソッドの一つ。on()メソッドは指定したイベントを発火させることができます。

on()メソッドの基本書式

$('セレクタ').on(イベント名, 実行する処理());

コードを当てはめると次のように記述できます。

on()メソッドのサンプル

<button id="js-btn">ボタンをクリック！</button>

const btn = $('#js-btn');

btn.on('click', function () {
  console.log('ボタンがクリックされました。');
});

click()イベントと同様の結果を得ることができました。

click()イベントとon('click')メソッドの違いはいったい何でしょうか？

実はこの2つの違いは、下記になります。

• 複数のイベントを登録できるかどうか
• jQueryで後から追加した要素に、イベントを登録できるかどうか

click()イベントはクリックイベントしか登録できない

click()イベントはクリックイベントしか登録できません。しかしon('click')メソッドでは複数のイベントを登録することができます。

例えばon('click')メソッドは次のように複数のイベントを登録できます。

on('click')メソッドで複数イベント登録

  <button id="js-btn">ボタンをクリック！</button>
  <div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
  transition: .4s;
}
.box.is-active {
  border-radius: 50%;
}

const btn = $('#js-btn');
const box = $('.box');

btn.on({
  'click': function () {
    box.toggleClass("is-active");
  },

  'mouseover': function () {
    box.css('transform', 'translate(30%)');
  }
});

出力結果

on('click')メソッドで「クリックしたら要素にis-activeクラスを追加・削除」「ボタンをホバーしたら要素が動く」の2つのイベントが発火するようになりました。このようにon('click')メソッドでは複数のイベントを登録することができます。

click()イベントは、jQueryで後から追加された要素にイベントを登録できない

click()イベントは、afterメソッドで要素が追加されてもイベントを登録することはできません。

  <button id="js-btn">ボタンをクリック！</button>
  <div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

.box2 {
  width: 100px;
  height: 100px;
  background: orange;
}

const btn = $('#js-btn');
const box = $('.box');

btn.click(function () {
  $('div').after("<button class=box2>click!</button>");
});
$('.box2').click(function () {
  $('.box2').css('background', 'red'); // 生成された要素にcssメソッドは効かない
});

const btn = $('#js-btn');
const box = $('.box');


btn.on('click', function () {
  box.after('<button class="box2">クリック！</button>');
});
$(document).on('click', '.box2', function () {
  $(this).css('background', 'red'); // 生成された要素にCSSメソッドは効く
});

出力結果

on('click')メソッドの場合、要素が生成されたものであってもCSSメソッドが効きます。

click()イベントが効かないときの対処法

以下の場合で、click()イベントは動作しません。

• jQueryで動的に追加された要素にイベントを登録できない

動的に要素を追加したり削除したりする要素に対しては、click()イベントが効きません。その場合はon('click')メソッドを使う方法に変えてみましょう。

まとめ

click()イベントはjQueryでよく使用されるメソッドです。思うように動作しない場合があるため、その場合はon('click')メソッドに切り替えるなどして、使い分けていきましょう。

click()イベントまとめ

• click()イベントが登録できるのは、クリックイベントのみ。
• 動的に追加された要素にイベントを登録することはできない。
• click()イベントが効かない場合はon('click')を使う。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る