Question

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

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

当我点击链接删除工作正常时，将删除带有.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

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

即

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

实施例

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

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

DEMO

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

Answer 2

您应该使用event delegation：

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

此处.holder是最接近的静态父元素。

DEMO： http://jsfiddle.net/jnLfh/5/

Answer 3

对于在执行事件绑定代码时DOM中不存在的动态添加元素，您需要event delegation。您可以将事件委托给动态元素的静态父级，在给定的示例中，您可以将其委托给.holder或文档

<强> Live Demo

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

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免经常附加和删除事件处理程序，jQuery Doc

Answer 4

更改为：

$(document).on('click', '.delete', function(e) {
    e.preventDefault(); // stops the jump

另外请注意，如果您想委派该事件，那么您应该总是尝试委托给最近的静态父（在准备好doc时可用），所以在这种情况下是<div class='holder'>然后您可以更改为：

    $('.holder').on('click', '.delete', function(e) {
        e.preventDefault(); // stops the jump

但是还有一件事需要注意如果您委托给最近的静态父级，那么您必须将此点击事件放在＆＃34;文档就绪块中＃34; 。

Answer 5

选择器无法识别脚本添加的新div。为此，您需要添加事件委派。这是一个例子

使用“on”

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

使用“live”（现在可能会折旧。请检查）

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

jQuery删除功能不起作用

5 个答案: