Question

所以我正在开发一个小型网络应用程序，用户在该应用程序中创建一个列表，并将其格式化并通过电子邮件发回给他们。无论如何，我无法创建一个删除列表项而不清除所有内容的功能方法。

用于添加/删除项目的jquery代码

function deleteItem(){
    $(this).closest('div').remove();
}
function addItem(){
    var item = $('#newItem').val();
    $('#list').append('<div><span>'+item+'</span><button class="delete">X</button></div>');
    $('#newItem').val('');
}

$(function() {
    $('.delete').on('click', deleteItem);
    $('#add').on('click', addItem);
});

我手动创建的第一个示例按预期工作，但添加的新项目根本不起作用。这里发生了什么？我是Javascript和jQuery的新手，所以我们非常感谢您的详细解释！

Answer 1

将事件委托给最近的静态容器：

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

此处有更多信息：http://learn.jquery.com/events/event-delegation/

Answer 2

使用.on()

使用Event Delegation。

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

语法

$( elements ).on( events, selector, data, handler );

fiddle Demo

Answer 3

您需要使用event delegation

使用

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

DEMO

使用jQuery删除父元素

3 个答案: