jQueryでクリックイベントが効かない時の対処法と連続する要素のどれがクリックされたか識別する方法

はじめに

jQueryでDOM操作をしているとき、appendやprependで挿入された要素の扱いに戸惑ったので調べたことをここにメモとして残します。

実現したいことは下記2点です。

①挿入された要素にクリックイベントを付与すること
②連続する要素をクリックした際、要素を識別すること

まず通常のクリックイベント

通常、セレクタを指定してclickもしくはonメソッドを用いる。

main.js

$(".btn").click(function(){
  console.log("クリック");
}

通常はこれで良いのですが、appendやprependで挿入された要素にイベントを付与する場合、通常の記述ではうまく動作しない時があります。

その解決策を次で記載していきます。

①挿入された要素にクリックイベントを付与する

挿入された要素にイベントを付与する場合は先程のセレクタの位置にdocumentを指定します。そして、onの中にイベント名とセレクタを記載します。

main.js

$(document).on("click", ".btn", function(){
  console.log("クリック");
}

②連続する要素をクリックした際、要素を識別すること

時にリストなどの連続するHTML要素では、何番目の要素がクリックされたか識別するのが難しい場合があります。こちらではその識別方法を紹介します。

まずこちら、一つ準備が必要です。

それは、生成されるHTML要素に識別可能な個別idを仕込んでおくことです。私はFirestoreでのメモアプリ作成時にこの方法を用いたのでFirestoreのドキュメントIDを個別idとして指定しました。

下記コードはその事例です。

Firestoreのとあるコレクションからオブジェクトを取得、makeMemoCard関数の引数に渡してそれをappendするHTMLタグ内でbuttonのidとして埋め込みをしています。

main.js

db.collection("collection")
  .onSnapshot((snapshot) => {
    snapshot.docChanges().forEach((change) => {
      if (change.type === "added") {

         //firestoreからデータを取得
         const data = change.doc;

         //表示用のhtml要素を作る
         const memos = makeMemoCard(data);
       }
     });
  });

makeMemoCard(data) {
 const memos =
 '<li class="memo-item">'
 + '<p class="memo-item-textarea">' + data.data().text + '</p>'
 + '<button id="' + data.id + '" class="delete-btn">×</button></li>';

 return memos;
},

次にクリックされた要素を識別するため個別idを取得する方法です。

先程紹介した挿入された要素にクリックイベントを付与する方法を用います。そして、取得するセレクタ内にthisを指定してクリックした要素を特定、attrメソッドでその要素のidを指定すれば先程埋め込んだ個別idを取得することができます。

main.js

$(document).on("click", ".btn", function(){
  const id = $(this).attr("id");

  //クリックした要素のidがコンソール上に出力される
  console.log(id);
}

このように個別idが取得できれば、その要素のみ編集したり削除したりすることが可能です。シンプルな方法ですが意外と初学者が詰まりやすいところなのではないかと思い今回記事にさせていただきました（自分が詰まった）。少しでも学習の助けになれば嬉しいです。