将"类名"设置为"已创建"按钮后，如何调用该"类"

Question

我得到了类"索引"；来自数据，但问题是：

当我添加新按钮时，它不会调用"类索引"；当我点击它的时候。错误在哪里？

function addbutton(id) 
{
newtag = document.createElement("button");
newtag.classList.add("trying");
newtag.innerHTML = "WHen I button that button it doesnt call function grupla() function";
divarea = document.getElementById("kanban_1");
divarea.appendChild(newtag);
};

var elems = Array.from(document.querySelectorAll('.trying'));
elems.forEach(el => el.addEventListener('click', grupla));
function grupla() 
{
var index = elems.indexOf(this);
alert(index);
};

<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button onclick="addbutton(this.id)">add</button>
<div id="kanban_1"> </div>

Answer 1

由于您正在绑定"点击"；事件绑定到html页面加载时的按钮(具有"trying"类(，新添加的按钮(在页面加载中不存在(将不会绑定"try"类；点击"；事件

你可以做的一件事是；点击"；事件，同时添加如下所示的新按钮。

function addbutton(obj) {
newtag = document.createElement("button");
newtag.classList.add("trying");
newtag.innerHTML = "WHen I button that button it doesnt call function grupla() function";
newtag.addEventListener('click', grupla)
divarea = document.getElementById("kanban_1");
divarea.appendChild(newtag);
};

var elems = Array.from(document.querySelectorAll('.trying'));
elems.forEach(el => el.addEventListener('click', grupla));
function grupla() {
var index = elems.indexOf(this);
alert(index);
};

<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button onclick="addbutton(this)">add</button>
<div id="kanban_1"> </div>

即使"；点击"；事件正在激发新按钮，您将不会得到预期的索引值。它将总是-1；elems"；数组是在页面加载时创建的，而页面加载时新按钮不在数组中。

Answer 2

您得到的第一个注释是：动态创建的元素上的事件绑定？。

您当前为所有现有的.trying元素注册了事件侦听器，但必须添加一个同时侦听新元素的事件侦听器。是否使用jQuery执行此操作取决于您。删除jQuery作为标签，然后如果你不想要它。

您还收到了一条评论，将您介绍给活动代表团。请点击人们给你的链接。例如，在您可能想要阅读和实现的一个链接中有一个教程链接(这是纯JavaScript解决方案(：JavaScript事件委派如何工作