.on() not working for generated elements
<p>AFAICT this should work but it doesn't. Using jQuery 1.9.0, I have the following:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;

            $(document).ready(function() {
                $("button").click(function() {
                    $("#area").html("&lt;p&gt;click me&lt;/p&gt;");
                });

                $("p").on("click", function() {
                    alert($(this).text());
                });
            });

        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;button&gt;Create me&lt;/button&gt;
        &lt;div id="area"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Why does clicking on "some text" bring the alert but clicking on the generated "click me" not? I thought the whole point of .on() was to enable event handlers on dynamically generated code. According to <a href="http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements">jQuery - Click event doesn&#39;t work on dynamically generated elements</a> this should work but it doesn't. See <a href="http://jsfiddle.net/ymUYy/1/" rel="nofollow">http://jsfiddle.net/ymUYy/1/</a></p>
