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


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

[code]

    //とりあえず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!!');
    });
[/code]

[code]

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




ajaxは非同期通信なので`$('.test2').click...` してる時点では対象が存在していないためですね。

いくつか方法はあると思いますが手っ取り早いのはデリゲートでしょうか。

[code]

    $('#hoge').on('click', '.test2', function(){
        ....
    });
    
[/code]

あるいは要素追加後にイベントリスナーを追加してもいいかもしれません。

