Jquery 使用'；这'；用于动态添加的html代码

所以我指的是这个问题

如我所见，我仍然可以通过单击动态添加的html代码来调用函数

但例如，我有以下代码：

for (i = 0; i < 5; i++)
{
    $(".container").after("<div class='article'><input type='button' id='button' /></div>");
}   

$('body').on('click', '#button', function () {
    $(this).parent().addClass("newClass");  // Of course this doesnt work because of 'this'
});

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

{
$（“.container”）。在（“”）之后；
}   
$（'body'）。在（'click'，'按钮'，函数（）{
$（this）.parent（）.addClass（“newClass”）；//当然，由于“this”的原因，这不起作用
});

---

对于动态添加的html代码，我如何仍然使用“this”？

因为您有一个循环，并且您正在添加一个具有相同id的元素，每个元素都必须是唯一的

.after("<div class='article'><input type='button' class='button' /></div>");

---

您没有提出的问题，但我需要提及以澄清：

当DOM中有相同的ID时会发生什么？

当浏览器查找具有该id的DOM节点时，如果在DOM中找到该节点，则停止查找其他节点。所以，结果是绑定到该id上的任何事件将只注册一个id

以下是测试用例：

$（“#按钮”）。单击（函数（）{
警报（this.textContent）；
});

点击1
点击2
点击3
单击4
我认为五个按钮的id相互冲突
$('body').on('click', '.button', function () {
    $(this).parent().addClass("newClass"); 
});