Javascript 如何在单击时获取动态添加元素的索引号

我正在编写下面的代码片段。为什么每次单击动态添加的按钮时，我总是得到索引号

0

我尝试了

$（this）.index（）

和

'#uploadPreview'）。查找（'.card'）。index（）

，但每次单击都会得到相同的索引号

$(document).on("click", ".btn-warning", function() {
   console.log($(this).index());
   console.log($('#uploadPreview').find('.card').index());
});

（i=0；i<5；i++）的

{
$（'#uploadPreview'）。追加（'×；-'+i+'
'）；
}
$（文档）.on（“单击”，“.btn警告”，函数（）{
log（$（this.index（））；
console.log（$（'#uploadPreview'）.find（'.card'）.index（））；
});

$（this）
是一个只有一个元素的jQuery集合。如果要检查
.btn warning
的集合中有哪个索引a
.btn warning
，则需要先创建所有
.btn warning
的集合，然后将要测试的元素传递到
.index
中。对于
.card
，也有类似的情况-您需要一个
.card
的集合来测试元素，以便在该集合中找到该元素的索引：


for（设i=0；i<5；i++）{
$（'#uploadPreview'）。追加（'×；-'+i+'
'）；
}
$（文档）.on（“单击”，“.btn警告”，函数（）{
常量btn警告=$（“.btn警告”）；
log（btnWarnings.index（this））；
常量卡片=$（“.card”）；
log（cards.index（this.parentElement））；
});

如果未向
.index（）
方法传递任何参数，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置。-您的按钮始终是同级元素（每个
中的元素）的第一个，因此索引始终是
0
。可能重复