jQuery删除功能不起作用

成就

我有一个带链接删除的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无法删除。

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

萨帕尔

您需要使用事件委托您必须使用.on()和委托事件方法。

IE

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

例子

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

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

演示

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章