Events on newly created elements - on() vs live()
<p>I have put together the following code as an experiment:</p>

<p>HTML:</p>

<pre><code>&lt;button&gt;Click Me&lt;/button&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$('button').on('click', function() {

    $newButton = $('&lt;button /&gt;');
    $newButton.addClass('newButton');
    $newButton.attr('href', '#');
    $newButton.html('A New Button');

    $('body').append($newButton);


});
</code></pre>

<p>The code itself works fine, and as expected when the button is clicked, jQuery produces a new button. The issue thats led to me scratching my head is that the newly created buttons don't react to being clicked, in other words, it won't create a new button, even though the jQuery code targets all  elements. </p>

<p>I understand that live() is no longer supported since 1.7 and has since been replaced with on(). As you can see, the above code uses the on() event however I'm not getting the result that live() use to offer. </p>

<p>Clearly I'm going wrong somewhere, can anyone advise?</p>

<p>Thanks. </p>
