Why does JQuery .live work with deleting dynamically added items but JQuery .on or .bind does not?
<p>I've heard that JQuery .live has been deprecated and should not be used any more.  I've got some sample code below that I've written where I have a button, with an id of adddiv, which appends a div with an id of seconddiv to an existing div with an id of firstdiv.  </p>

<p>Within the seconddiv, I have another button, with an id of delete, that, when clicked, I want to delete the seconddiv.  The code works fine as is, but if I change the JQuery where I'm catching the click event for the delete button to use either .on or .bind, it fails to work.  </p>

<p>Can anyone tell me how to change this to use either .on or .bind to get this to work?</p>

<p>HTML:</p>

<pre><code>&lt;div id="firstdiv"&gt;
Pre Existing Div
&lt;input type="button" id="adddiv" value="Add Div" /&gt;
&lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $().ready(function () {

        $('#adddiv').click(function () {
            $('#firstdiv').append('&lt;div id="seconddiv"&gt; Click here to delete the second div: &lt;input type="button" id="delete" value="Delete Div"&gt;&lt;/div&gt;')
        });

        $('#delete').live('click', function (e) { 
            $(this).parent('#seconddiv').remove();
        });   
    });
&lt;/script&gt;
</code></pre>
