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が押されたよ!");
    });
});

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

では。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。