SVG画像を動的に入れ替えた後にクリックイベントが発火しない件

いいねのハートの画像をクリック前からクリック後に入れ替えたときに、クリックのイベントが発火しないため、数時間悩んでいました。
ChatGPTを使っても、短時間に回答を得られませんでした。
でも、今回とても簡単なことだったので、私自身の備忘録の意味も込めて記録したいと思います。

今回このように、イベントハンドラを書いていました。

$(document).on("click", "img.like-comment-icon.like-icon", function () {
	//ハンドラ
	}

そして、画像を入れ替えた後に、クラス名が追加されます。
クラス名が追加されると上記の書き方では、要素を特定できなくります。

下記に、ChatGPT Plusの解説を引用転載しまいた。
JavaScriptにおいて、イベントリスナーをアタッチする際のセレクタは、そのイベントが発生する要素に正確にマッチしている必要があります。 2つのクラスを持つ 要素にのみマッチします。

img.like-comment-icon.like-iconとlike-comment-iconとlike-iconとimg

しかし、新しい画像に 追加のクラスがある場合、このセレクタはそれにはマッチしません。
イベント のすべてのクラスを持つ要素に対しても動作するようにしたい場合は、セレクタを以下のように変更する必要があります。

$(document).on("click", "img.like-comment-icon", function () {
  // イベントハンドラのコード
});

つまり動的に変わる画像についている一つ上のクラス名を指定しておくと、画像にクラス名を追加して入れ替えても、クリックのイベントが発火します。

そして、SVG画像をクリックイベントがある形で使うときは、CSSで、このように書いておくと良いです。

.like-comment-icon{ 
  pointer-events: auto;
}