jquery .html()で、特定条件の場合セレクタが有効にならない問題

下記ソースでの$('.test2')に対しての処理を通したいのですが
動かず困っています。
ご教授ください。

//とりあえず1回書き替えてみる
$('#hoge').html('<li>test1</li><div class="test1">click here</div>');

//これは動く
$('.test1').click(function(){
  console.log('test1 done');
  alert('test1 done');
  //実際にはここでajax処理を挟んでデータ取得後、次の行にはめたい
  $('#hoge').html('<li>test2</li><div class="test2">click here (this is problem. not work)</div>');
});

//これが動かない
$('.test2').click(function(){
  console.log('test2 done');
  alert('test2 done. ok!!');
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='hoge'></div>