Jquery 如何在动态附加的元素上附加单击事件？

我使用HTML和CSS制作了一些警报，我想通过jQuery添加和删除这些警报，但问题是当按下关闭按钮时，我无法关闭动态添加的警报

我也搜索过google和stack overflow，但我不明白他们是怎么做的，如果你们能给我一些解释和答案，我将不胜感激

$（文档）.ready（函数（）{
//删除警报
$（“.close”）。在（“单击”，函数（）{
$（本）
.parent（“.alert”）
.slideUp（250）
.承诺
.done（函数（）{
$（this.remove（）；
});
});
//附加警报
常数btn=$（“#btn”）；
btn.on（“单击”，函数（）{
$（$（“.alert”）[$（“.alert”）.length-1]）
.之后(
“动态添加”
)
.hide（）
.向下滑动（250）；
});
});
正文{
背景色：#ddd；
字体系列：无衬线；
字体大小：14px；
字母间距：1px；
}
.警惕{
显示：块；
位置：相对位置；
宽度：100%；
最大宽度：30雷姆；
填充物：5雷姆。8雷姆；
保证金：1rem自动0；
边界半径：.2em；
颜色：#fff；
}
.警报，关闭{
浮动：对；
宽度：10px；
高度：10px；
光标：指针；
}
.alert.close:hover svg、.alert.close:focus svg{
填充：#fff；
}
。警报。关闭svg{
填充：rgba（255、255、255、0.5）；
}
.警惕-丑陋{
背景色：#4C4A48；
}
.警惕-危险{
背景色：#E81123；
}
.警惕-成功{
背景色：#00CC6A；
}
.警报.-信息{
背景色：#0078D7；
}
.警报标题{
显示：内联块；
垂直对齐：中间对齐；
}

添加警报
危险
成功
问询处
如此接近，只需更改此行：

$(".close").on("click", function() {

至：

$(document).on("click", ".close", function() {


$（文档）.ready（函数（）{
//删除警报
$（文档）。在（“单击”，“关闭”，函数（）上）{
$（本）
.parent（“.alert”）
.slideUp（250）
.承诺
.done（函数（）{
$（this.remove（）；
});
});
//附加警报
常数btn=$（“#btn”）；
btn.on（“单击”，函数（）{
$（$（“.alert”）[$（“.alert”）.length-1]）
.之后(
“动态添加”
)
.hide（）
.向下滑动（250）；
});
});
正文{
背景色：#ddd；
字体系列：无衬线；
字体大小：14px；
字母间距：1px；
}
.警惕{
显示：块；
位置：相对位置；
宽度：100%；
最大宽度：30雷姆；
填充物：5雷姆。8雷姆；
保证金：1rem自动0；
边界半径：.2em；
颜色：#fff；
}
.警报，关闭{
浮动：对；
宽度：10px；
高度：10px；
光标：指针；
}
.alert.close：悬停svg，
.alert.close：焦点svg{
填充：#fff；
}
。警报。关闭svg{
填充：rgba（255、255、255、0.5）；
}
.警惕-丑陋{
背景色：#4C4A48；
}
.警惕-危险{
背景色：#E81123；
}
.警惕-成功{
背景色：#00CC6A；
}
.警报.-信息{
背景色：#0078D7；
}
.警报标题{
显示：内联块；
垂直对齐：中间对齐；
}

添加警报
危险
成功
问询处
这里是jsfiddle链接，“警报”可能是一个非常糟糕的术语，因为它在JS中是一个特殊的词。使这个问题的最初阅读变得非常混乱。
$（$（“.alert”）[$（“.alert”）.length-1]）
是我所见过的最糟糕的符号，仅为
$（'.alert'）。last（）
..@pyromank Like@x先生，谢谢你，我不知道。我想还有一个不喜欢Bootstrap的原因。使用“保留”字来表示用户可能会调用的警报是非常令人困惑的。我会叫他们信息箱。另一方面，w3schools并不总是一个可靠的来源（我并不是说在这种情况下它是可靠的）。