Click Event on button in list not working

<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>');

                 });
             });开发者_JAVA技巧
                </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

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>');