動的生成した要素に対してjQueryでイベントをつけるとき

自分用メモ jQuery

jQuery+AjaxでDBから持ってきたデータを動的生成したのはいいけど、新たに生成した要素に対してイベント反応しない…

となっていたので解決メモ

<div>
    <button class="btn1">最初からあるボタン</button>
</div>

$(document).ready(function(){
    $('div').append(’<button class="btn2">新たなボタン</button>’);
});

$('.btn1').on('click', function(){
    alert('最初からあるボタン');
});

$('.btn2').on('click', function(){
    alert('新たなボタン');
});

divの中にボタンを動的生成
すると.btn1のイベントは効くのに動的生成した.btn2のイベントはうんともすんとも言わない

なので.btn2のクリックイベントを

$(document).ready(function(){
    $('div').append(’<button class="btn2">新たなボタン</button>’);
});

$('.btn1').on('click', function(){
    alert('最初からあるボタン');
});

$(document).on("click", ".btn2", function(){
    alert('新たなボタン');
});

こう変えると反応するようになる