jQuery删除功能不起作用

Question

我有一个带链接删除的Div，当我单击删除此Div时将其删除。

JS菲德尔

    <div class="bar">
        <p style="float:left"> Hello world</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>

当我单击正常工作的链接删除时，带有Class .bar的div将被删除。

但我还在div（.bar）下面创建了一个链接：

<a href="#" class="add">+ Add New</a>

单击+添加新将创建一个新的.bar div。

$('.add').click(function() {
 $(".holder").prepend('<div class="bar"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});

但是问题是当创建这个新的.bar div时，单击删除不起作用。此新的.bar div无法删除。

这是为什么 ？还有其他方法吗？任何帮助都感激不尽。

Answer 1

您需要使用 事件委托。您必须使用.on（）使用委托事件方法。

即

$(document).on('event','selector',callback_function)

例

$('.holder').on('click', '.delete', function() {
    $(this).parent('.bar').remove();
});

代替document您应该使用最近的静态容器。

演示

委托事件的优点是，它们可以处理以后在后代添加到文档中的后代元素中的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免了频繁附加和删除事件处理程序的需要。