Click Event on button in list not working

Question

<ul id="mylist">
<li id="1">1<button id="Button3">Delete</button> </li>    
<li id="2">2<button id="Button2">Delete</button></li>
<li id="3">3<button id="another_entry">Save</button></li> 
</ul>

I have the code as follows:

<script type="text/javascript">
             $(document).ready(function() {
             $("#mylist :button").live('click', function() {

                     var text = $(this).text();
                     if (text == "Delete") {
                         $(this).parent().remove();
                     }
                     else {
                         $(this).text("Delete");
                     }
                 });

                 $("#mylist li:last-child button").live('click', function() {
                 $(this).parent().append('<li>' + '<input type = "textbox">' + '<input type = "button" value= "Save">' + '</li>');

                 });
             });
                </script>

On clicking the button on the last list, it doesn`t add the new list, nor is the text on the save button changed as delete

Answer 1

You have to append the newly created li to ul and not to the parent of button which is li.

Change you code to

$(this).closest("#mylist").append('<li><input type = "textbox" /><button>Save</button></li>');