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

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

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

http://jsfiddle.net/5RkHd/