jQueryのappendで追加した要素のclickイベントが動かない場合

    //ボタンクリック時にアラート
    $("#sampleBtn").click(function() {
        alert("クリック!");
    });
    //クリック時にアラートを出すボタンをbodyに追加
    $("#addBtn").click(function() {
        $("body").append('<a id="sampleBtn">サンプルボタン</a>')
    });

上記のコードではclickイベントが発生しない。
.bindや.clickは新たに追加されたDOMに影響を与えないからだ。

しかしon関数を使うことで容易に解決できた。
on関数は.bindや.live、.delegateの後継となる上位関数。

    //ボタンクリック時にアラート
    $(document).on("click","#sampleBtn", function() {
        alert("クリック!");
    });
    //クリック時にアラートを出すボタンをbodyに追加
    $("#addBtn").click(function() {
        $("body").append('<a id="sampleBtn">サンプルボタン</a>')
    });

これなら一々bindしなくても常にイベントが発生する。

.click()と.live()と.delegate()の違いは以下のページを参照。
http://d.hatena.ne.jp/y-kawaz/20111002/1317489435

あわせて読みたい

コメントを残す