javascript - jquery 无法在 .append 内容中工作

Question

我有一个 div，其中包含加载时填充的内容(一堆“span”标签，每个标签中都有一个删除链接。单击删除按钮将删除该范围。现在您还可以向其中添加新的“span”标签使用单独的按钮(每个按钮都有自己的删除按钮)。最初加载的跨度删除按钮工作正常，但新添加的按钮不会删除。

<div class="instances"> 
<span class="item">Instance 1 <a href="#" class="del">delete</a></span>
<span class="item">Instance 2 <a href="#" class="del">delete</a></span>
</div>
<span class="addinstance">Add an instance</span>


$('.addinstance').click(function () {
$('.instances').append('<span class="item">More <a href="#" class="del">delete</a></span> ');
});

$('.instances .del').click(function (event) {
event.preventDefault();
$(this).parent('.item').hide();
});

查看我为此工作版本制作的 fiddle : http://jsfiddle.net/Ac7x6/3/

在 fiddle 中:

1. 单击实例 1 上的删除按钮 - 工作正常。

2. 点击“添加实例”按钮 - 这将添加一个新条目。

3. 点击新添加的实例上的“删除”按钮 - 不会删除。

我读过很多关于这个问题的文章，包括 jquery .on()。只是不确定具体如何实现它们。

救命啊! :)

Answer 1

对动态生成的项目使用事件委托(delegate)，如果您想删除该项目，请使用 remove()

$('.instances').on('click','.del',function (event) {
    event.preventDefault();
    $(this).parent('.item').remove();
});

Fiddle Demo