jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ

知ってるよって？

知ってる人には当たり前、でも知らない人はかなり躓くんだよ！

事象

こんなボタンを作るじゃろ

<div class="btn-area">
    <button type="button" class="add-btn">ボタン1</button>
</div>

こんなスクリプトを設定するじゃろ
（自分のボタンナンバー+1のボタンを作成）

$(".add-btn").on("click", function () {
    var num = Number($(this).text().replace("ボタン", ""));
    var html = '<button type="button" class="add-btn">ボタン' + (num + 1) + '</button>';
    $(".btn-area").append(html);
});

「ボタン1」をクリックするたび「ボタン2」が増えるね

だがしかし！

「ボタン2」をクリックしても何も起きない！指定してるclass一緒なのにー
増えろ増えろ増えろ（カチッカチッ）

こいつ...動かないぞ。

動くわけないんだ、イベントを設定してないからね！

対策

HTMLをスクリプトで追加した後にその要素に対してイベントを設定すればいいんだけど、
こんな感じにクリックイベントを書くと追加した要素にもイベントが適用される。

// $(".add-btn").on("click", function () {
$(document).on("click", ".add-btn", function () {
    var num = Number($(this).text().replace("ボタン", ""));
    var html = '<button type="button" class="add-btn">ボタン' + (num + 1) + '</button>';
    $(".btn-area").append(html);
});

ほれほれほれほれ