jquery - 附加列表项不会自行删除

Question

我有一个列表，其中包含一个预先存在的按钮，单击该按钮后该按钮会自行删除。单击添加按钮时，另一个按钮将添加到列表中，但这一次，即使它属于同一类，附加的按钮也不会删除自身。
http://jsfiddle.net/PEh6H/
这是一些示例代码，因为我必须包含它:

 $(function() {
        $("#add").on('click', addListItem);
            $(".delete").on('click', deleteItem);
            });
        function deleteItem(){
            $(this).parent().remove();
        }    
        function addListItem(){
        $("#todolist").append('<li><button class="delete">This one doesn\'t</button></li>');
        }

和 html:

<ul id="todolist">
    <li><button class="delete">This one works</button></li>
    </ul>
    <button id="add">Add</button>

Answer 1

您应该从元素或文档对象的静态父级之一委托(delegate)该事件。

$('#todolist').on('click', '.delete', deleteItem);

http://jsfiddle.net/5RkHd/