なべしす

独立系SI企業から完全異業種のベンチャー企業に転職、社内のITインフラを整えるべく颯爽と登場した自称天才プログラマー俺のハートフルブログ

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

知ってるよって?

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

事象

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

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

スクリーンショット 2017-02-22 17.46.32.png

こんなスクリプトを設定するじゃろ (自分のボタンナンバー+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」が増えるね:wink: スクリーンショット 2017-02-22 17.46.41.png

だがしかし!

「ボタン2」をクリックしても何も起きない!指定してるclass一緒なのにー 増えろ増えろ増えろ(カチッカチッ) スクリーンショット 2017-02-22 17.47.33.png

こいつ…動かないぞ。

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

対策

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

$(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);
});

ほれほれほれほれ スクリーンショット 2017-02-22 17.47.58.png