jqueryで追加した要素のjavascriptを実行できない

jquery

題記の件で、ハマっている。

index.htmlが以下の通り。

<html>


<head>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>                                             
<script type="text/javascript" src="./js/hoge.js"></script>                                             
</head>

<body>
  <a href="javascript:void(0);" class="hoge">aiueo</a>
</body>


</html>


./css/common.cssは以下の通り。

.hoge {
  color: red;
}

./js/hoge.jsは以下の通り。

$(function() {

  $('.hoge').click(function(event){
    $(this).after("<br><a href=\"javascript:void(0);\" class=\"hoge\">aiueo</a>");
  }); 


});

で、index.htmlに表示される『aiueo』リンクをクリックすると、
その下に新たにリンク『aiueo』が追加される。


だが、そのリンク『aiueo』をクリックしても、
何の変化もない。つまり、javascriptが実行されない。


なぜなのか、どうすれば良いのか。


cssは適用されているのになぁ〜。