Jquery事件委派未触发

我已经整理了以下JSFIDLE：

删除
var are_you_sure=$（“您确定要删除此文件吗？是|否”）；
$（文档）.ready（函数（）{
$（'.delFile'）.css（'cursor'，'pointer'）.off（'click'）.on（'click'，'delefile'）；
})
函数删除文件（e）{
df=$（本）；
e、 停止传播（）；
$（df）.append（你确定吗）；
//加里-我不知道这为什么不起作用？？
$（'.delFile'）。在（'单击'，'.no'，函数（）上{
警报（“点击”）；
$（this.parent（）.remove（）；
})
}

正如您将看到的，我基本上希望动态删除父级，并根据堆栈溢出上其他地方的答案将其配置为使用事件委派。但由于某些原因，即使配置了此项，父元素也不会被删除

---

我做错了什么？

您反复添加侦听器，添加和删除

.alert

元素，因为

deleteFile

不仅在按下

delete

时触发，而且在按下附加元素（例如

.no

）时也会触发

我将附加一个侦听器来删除父元素

是否确实
元素，并在
删除文件
中，确保单击的元素不是
.alert
的子元素，然后再附加
.alert

您还需要使用
.detach
而不是
.remove
来跨多个
删除
单击保留
否
事件侦听器


var are_you_sure=$（“您确定要删除此文件吗？是|否”）
.on（'click'，'no'，function（）{
$（this.parent（）.detach（）；
});
$（文档）.ready（函数（）{
$（'.delFile'）.css（'cursor'，'pointer'）。打开（'click'，deleteFile）；
})
函数删除文件（e）{
e、 停止传播（）；
如果（！e.target.closest（'.alert'））{
//然后单击外部的“删除”文本节点，而不是.alert部分
$（这个）.append（你确定吗）；
}
}

删除
发生的事情是：


单击delFile
添加是/否
点击No
运行。无代码并从DOM中删除元素（但不从变量
中删除，您确定吗
）

然后再次运行delFile click并重新添加刚才删除的jquery元素

添加一个
返回false
，或者更具体地说，添加到内部（.no）单击处理程序

$('.delFile').on('click','.no', function() {
    $(this).parent().remove();
    // stop the `.delFile` element getting a click
    return false;
})

更新小提琴：


请注意，对于原始代码，您不需要事件委派，因为您直接在事件处理程序之前添加HTML。您还添加了一个jquery对象，这会使事情复杂化

委派的事件处理程序可以位于单击处理程序之外，这是事件委派的目的：

function deleteFile(e){
    df = $(this);
    e.stopPropagation();

    $(df).append(are_you_sure);
}

$('.delFile').on('click','.no', function() {
    $(this).parent().remove();
    return false;
})

为什么要在事件处理程序（
deleteFile
）中设置事件处理程序（委托的事件处理程序）？这几乎总是一个反模式。还要注意的是，在
ready
处理程序中不需要
.off（'click'）
，除非您确实有其他在ready之前运行的代码会添加一个click处理程序。off click是因为它可以被称为repeatedlyNo，它不能。：-）jQuery只调用一次您传递的函数
ready
。您在事件处理程序中使用事件委托，这毫无意义。使用事件委托的全部意义在于，您不需要有条件地添加事件处理程序；只要元素存在，它就在那里，等待被调用。任何必要的条件都可以通过标志来控制。谢谢-这是一个复制/粘贴答案
function deleteFile(e){
    df = $(this);
    e.stopPropagation();

    $(df).append(are_you_sure);
}

$('.delFile').on('click','.no', function() {
    $(this).parent().remove();
    return false;
})