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();
});

查看我为此工作版本制作的小提琴： http://jsfiddle.net/Ac7x6/3/

小提琴：

单击Instance 1上的删除按钮 - 工作正常。
点击“添加实例”按钮 - 这会添加一个新条目。
点击新添加的实例上的“删除”按钮 - 不删除。

我已经阅读了很多关于这个问题的内容，包括jquery .on（）。只是不确定如何实现它们。

帮助！：）

Answer 1

对动态生成的项目使用事件委派，如果要删除该项目，请使用remove()

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

Fiddle Demo

Answer 2

试试这个，

$(document).on("click", '.instances .del', function (event) {
    //your code
});

jquery没有在.appended内容中工作

2 个答案: