クリックしたら要素が増える。jQueryの使い方としてはとてもポピュラーな手法ですが、たまーにハマると抜け出せなくなるのもjQueryでよく陥る状況。今回は動的に増やした要素に対するクリックイベントが発火しない、という状況に出くわしてしまいました。
状況
WebSocket通信によるチャットのやり取りをする会話の部分のお話。カスタマーサポート系のチャットだったので、テキスト入力でのメッセージ送信とテキストリンクをクリックすることで定型文を投げる2種類のやり取りがありました。例えば以下のようなテキストリンクがあります。（テキストリンクと言いつつspanタグですが）
問い合わせ先を知りたい
これをクリックすると、以下のような回答が返ってきます。
電話での問い合わせ メールでの問い合わせ
この回答をクリックしても次に進んでくれない、という状況でした。
jQueryの記述
ざっくり以下のように記述していました。
$("span").on("click", function () {
// $(this).text() でテキストを取得して質問を投げ、回答用のspanタグを受け取りHTMLに追加
});
このままだと動的に追加した要素のクリックイベントは発火してくれないので、以下のように書き換えます。
//$("span").on("click", function () {
$("body").on("click", "span", function(){
// $(this).text() でテキストを取得して質問を投げ、回答用のspanタグを受け取りHTMLに追加
});
HTMLに追加した後にクリックイベントを設定すればそれで良しなのですが、この記述にすることで動作してくれます。
以上、動的に追加した要素のクリックイベントが発火しない時の書き方でした。
