时间戳

首页 > 解决方案 > 将“类名”设置为“创建”按钮后，如何调用该“类”

javascript - 将“类名”设置为“创建”按钮后，如何调用该“类”

问题描述

我从数据中获得了类“索引”，但问题是：

当我添加新按钮时，它不会调用“类索引”当我点击它时..错误在哪里？

 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>

标签： javascriptjquery

解决方案

您得到的第一条评论是答案：动态创建元素上的事件绑定？.

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

您还收到一条评论，将您推荐给事件委托。请点击人们给你的链接。例如，您可能想要阅读和实施的链接之一中有一个教程链接（它是纯 JavaScript 解决方案）：JavaScript 事件委托的工作原理

推荐阅读