单击列表按钮事件不工作

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> 

我的代码如下：

<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> 

在单击最后一个列表上的按钮，它不`吨添加新名单，也不是文字保存按钮变更为删除

Answer 1

你必须要追加新创建li到ul，而不涉及button父是li。

更改您的代码

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