id付きのHTMLテキストを変更→元に戻すと、クリックイベントが機能してくれません。

JavaScriptの、クリックで起動する関数なんですが、HTMLテキスト内の要素をクリックする事で起動させていました。このHTMLテキストの中身が変わるので、最初の（要素をクリックでイベント起動できる）状態に戻すと、今度は関数が動いてくれません。
具体的には以下のような感じです↓
【HTML】
<div id="Msg">
<p>
<ul>
<li id="attack">こうげき</li>
<li id="defense">ぼうぎょ</li>
<li>アイテム</li>
</ul>
</p>
</div>
ゲームの戦闘シーン的なもので、#attack をクリックすると、HTMLテキストが変わったり、HPゲージが減ったりします。
その後、#Msg 内を上記の初期状態に戻すのですが、全く同じHTMLに戻しても、クリックイベントが起動しないのです。（chrome の検証機能（デベロッパーツール）でも特にエラー等も出ません）

ちなみに、クリックで＃Msg内を特に変更せず、別の要素（HPゲージ）だけを変化させるような場合は、複数回クリックしてもそのたびに作動してくれました。
なので、#Msg内を一旦書き換えた事で、見た目上（HTML上）元に戻しても何かがマズイって事のようですが・・・
どうしたら良いのでしょうか？

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/04/20 09:43

こんにちは

実際にどのような処理を行っているのかわかりませんので、以下は全て想像での回答です。

要素へのイベント処理の設定は、その要素に対してイベント処理を紐付けますが、例えば
＞　<li id="attack">こうげき</li>
のLI要素を一旦削除して、同じ位置に同じ内容の要素を追加したとしても、元のイベントの設定は失われます。
（想像するところ、この状態が起きているのではないかと思います、）
なぜなら、イベントが設定されている要素は削除され、同じ内容の（異なる）要素が追加されたことになるからです。

もしも原因がこれに類するところにあるとするなら、いくつかの対処方法が考えられます。
最も簡単なのは、
　・要素の削除を行わない
ご質問文を読む限りでは、結果的に同じ要素を作成しているようですので、わざわざ削除する必要もなく、内容を書き換えれば済むことのように思われます。
あるいは一時的に削除状態にしたければ、非表示にすることで代えるということも考えられます。
ですので、要素の削除を行わなければイベント設定が失われることもなくなります。

直接的な方法としては、
　・新しい要素を追加する際に、同時にイベントの設定も行う
初期状態でイベントを設定するのと同じで、新しい要素に紐づけを行えばそれで済む話ではあります。

いちいちそのような設定をするのが面倒なら、
　・個々の（変わる可能性のある）要素にイベントを設定せずに（変わる可能性のない）親要素に設定する。
これは、クリックイベントの様なマウスイベントの多くがバブリングすることを利用したものです。
https://developer.mozilla.org/ja/docs/Learn/Java …

極端に言えば、Documentレベルで取得しても良いのですが、ご質問文の様子から見ると<div id="Msg">の要素は変わらないようですので、そこで取得すれば十分かと。
この方法は、リスト等で内容が動的に増減したりするような場合で、個々のクリックに対して似たような処理を行いたいといった場合に有効といえます。
ご質問のケースは（内容がまったく不明ですが）、このようなケースでもなさそうに思われますが、対処方法として採用するのに問題はないはずです。
また、この方法であれば、子要素にたくさんのイベントを設定する代わりに、親要素にひとつのイベントを設定しておけば済むというメリットもあります。

この回答へのお礼

ご回答ありがとうございます！！
バブリングというのは、全く知りませんでした。
仰るように、要素を削除というかなくならないようにして、単にCSSのdisplay: none で非表示にする事でひとまず解決しました。（再表示した時にクリックイベントがちゃんと発動してくれます）

お礼日時：2020/04/20 23:40