jQueryのhtml()やappend()やprepend()で追加した要素に.on(“click”,function(){})が効かない時の対処法

append等で追加したhtmlの要素をクリックした時にあれこれしたいって場合への対処法。

現象について

$(function() {
    $('.append_btn').on('click',function() {
        $('body').append('<div class="more_append"></div>');
    });
    $('.more_append').on('click',function() {
        alert("more_appendが押されたよ！");
    });
});

したいこととしては、
.append_btnをクリックしたら.more_appendをhmtlに追加、.more_appendをクリックしたらアラートが鳴るというもの。
なんだけど、上の記述だと.more_appendをクリックしても何も起きない。
・・・あれ？onだったら大丈夫って話じゃないの？

解決方法

どうやら追加した要素に対してclickは正攻法では無理っぽい。
なので、すでにある要素を使って対処する
というわけでできたものがこちらになります。

$(function() {
    $('.append_btn').on('click',function() {
        $('body').append('<div class="more_append"></div>');
    });
    $(document).on('click','.more_append',function() {
        alert("more_appendが押されたよ！");
    });
});

クラスをセレクタとして指定することで実現できる。

では。