使用“this”动态添加html代码

Question

所以我指的是这个问题jQuery click event, after appending content

正如我所看到的，我仍然可以通过单击动态添加的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'
});

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

Answer 1

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

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

将其更改为类并使用它：

$('body').on('click', '.button', function () {
    $(this).parent().addClass("newClass"); 
});

你没有提出的问题，但我要提一提，以澄清：

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

当浏览器使用该id查找DOM节点时，如果它在DOM中找到，则停止查找其他节点。因此，任何绑定在该id上的事件都将只为一个id注册。

下面是测试用例：

​

$('#button').click(function(){
    alert(this.textContent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button'>Click1</button>
<button id='button'>Click2</button>
<button id='button'>Click3</button>
<button id='button'>Click4</button>

​