Javascript jQuery删除函数不工作

我有一个Div，当我点击remove this Div removed时，它带有一个链接remove

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

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

你好，世界

在这里，当我点击remove链接时，带有Class.bar的div将被删除，该链接工作正常

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

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

单击+添加新的将创建一个新的.bardiv

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

$（'.add'）。单击（函数（）{
$（“.holder”）.prepend（“
Hello world
”）；
});

但是问题是在创建这个新的.bar div时单击“删除不工作”。此新的.bar div无法删除

为什么呢？还有别的办法吗？任何帮助都将不胜感激

您需要使用。您必须使用委托事件方法

i、 e

范例

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

您应该使用最接近的静态容器来代替

文档

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

你需要使用。您必须使用委托事件方法

i、 e

范例

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

您应该使用最接近的静态容器来代替

文档

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

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

.holder

或document

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

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

委托事件

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序

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

.holder

或document

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

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

委托事件

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序

你应使用：

此处

.holder

是最近的静态父元素

演示：您应该使用：

此处

.holder

是最近的静态父元素

演示：更改为：

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

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

另请注意，如果要委派事件，则应始终尝试委派最接近的静态父级（在准备文档时可用），因此，在您的情况下，这里是

，您可以更改为：

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

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

但是这里还有一件事需要注意如果您要委托给最近的静态父对象，那么您必须将此单击事件放入“文档准备块”

更改为：

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

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

另请注意，如果要委派事件，则应始终尝试委派最接近的静态父级（在准备文档时可用），因此，在您的情况下，这里是

，您可以更改为：

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

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

---

但是这里还有一件事需要注意如果您要委托给最近的静态父级，那么您必须将此单击事件放入“document ready block”（文档准备块）中，选择器将无法识别脚本添加的新div。为此，您需要添加事件委派。这里有一个例子

使用“on”

使用“live”（现在可能会贬值，请检查）

---

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

使用“on”

使用“live”（现在可能会贬值，请检查）

---

为了获得更好的性能，您应该使用最接近的静态父元素，而不是

document

。为了获得更好的性能，您应该使用最接近的静态父元素，而不是

document

。（此）在本例中指的是

$（'.delete'）

，因此将仅删除此项。此外，它不使用其他答案中描述的事件委派，因此它将找不到以后添加的元素。

$（此）

在本例中指的是

$（'.delete'）

，因此将仅删除此元素。此外，它没有使用其他答案中描述的事件委派，因此它不会找到后面添加的元素。