Newly added elements on page aware of previously defined Javascript code
<p>In this very simplified and minimized example click event handler has been defined for every <em>a</em> tag (simple alert is displayed after link is clicked). Once you click the button, second link is added to the page. </p>

<p>But if you click this newly added link, event handler wan't be called. Any idea why? What should be added/changed so that newly added elements are aware of the scripts defined on the main page?</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $("document").ready(function() {
            $("a").click(function() {
                alert("link is clicked");
                return false;
            });
            $("#btn").click(function() {
                $("#second").html("&lt;a href='#'&gt;Second link&lt;/a&gt;");
            });
        });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="first"&gt;
        &lt;input id="btn" type="button" value="Get new content"/&gt;
        &lt;a href="#"&gt;Original link&lt;/a&gt;
&lt;/div&gt;
&lt;div id="second"/&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In this particular case, what should be done so that second link is aware of event handler defined in <em>script</em> section so that alert is being displayed after link is clicked?</p>

<p>What's your advice on resolving these kind of situations? How do you make newly added elements on the page be aware of previously defined Javascript code?</p>
