Add an action to html generated by javascript?

Add an action to html generated by javascript?

How can I add an action to html generated by javascript?

In the example below I add a link with the class 'example' to a div after a click on the 'test' link. (this is still working fine).

Now, when I click the example link, nothing happens. How can I make this work?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html lang="nl">
<head>
<title>testpagina</title>
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
   $(function(){
      $(".test").click(function () {
         var html = '<a href="#" class="example">example</a>';
         $("#test").append(html);
      });
      $(".example").click(function () {
         alert("example");
      });
   });
</script>
</head>

<body>
<a href="#" class="test">test</a>
<div id="test"></div>
</body>
</html>