jQueryでclickイベントが効かない場合の対処法!

jQueryでclickイベントが効かない場合というのは、主に.append()などで後から追加したDOM要素に.click()を指定した場合です。ここではjQueryでclickイベントが効かない場合の対処法についてサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1jQueryでclickイベントが効かない問題
  2. 2jQueryでclickイベントが効かない場合の対処法
  3. 3まとめ

jQueryでclickイベントが効かない問題

jQueryでonメソッドを使いclickイベントに紐付けてJavaScriptの処理を発火させる事ができますが、onメソッドを使ってもclickイベントが発火しない場合があります。

実際にサンプルコードで確認してみましょう。

このように1回目に押されるsubmitボタンである「追加」ボタンは発火しますが、追加した要素である2回目に押される「追加されたボタン」は動かないです。

この原因としてはappendメソッドで後から追加した要素にはonメソッドでのクリックイベントの紐付けがされていないために起こります。

ではこの場合の対処法はどのようにすればいいのでしょうか?

jQueryでclickイベントが効かない場合の対処法

jQueryでappendメソッドで後から追加した要素に、clickイベントを効かせるようにする方法は、要素に対してではなく、documentに対してイベントを設定することです。

記述方法としては以下のようになります。

clickイベント

$(document).on('click', 'セレクタ', function(){
  // イベント発火時の処理
});

では実際にサンプルコードで確認してみましょう。

このように追加した要素に対して、clickイベントが効いていることが分かります。

まとめ

いかがでしたでしょうか?

追加したDOM要素に対して、clickイベントを発火させたいという場合はぜひここで紹介した方法を用いてみてください。

GeekHive採用サイト

関連記事